这是我参与更文挑战的第1天，活动详情查看： 更文挑战

源码地址：github.com/ohsogasne/1… （欢迎大家star，后面也会给大家带来很多好的作品）

引言：居中对齐作为一种极其常见的需求，似乎从理论上来说他是如此简单又理所当然，但是在实际开发中初学者总是会遇到这样或那样的问题，而今天我们将聊聊十一种我喜欢的居中对齐方式，希望大家有所收获。James Anderson就说过“44年前我们就把人类送上月球，但现在我们仍然无法在css实现垂直居中”。其实，就像吃中餐会用筷子汤勺一样，只要你明白“筷子与汤勺”的使用方式并且经常使用后，便可以熟练掌握。而居中也不例外，当你认识了下面十一种居中对齐方式，很多居中问题都会迎刃而解。下面就让我们一起走进“居中的世界”，探访下“居中王国”的用餐礼仪吧！

1、flexbox

在我看来这是最佳的解决办法，flexbox在针对居中对齐时我们只需要使用三行代码，将需居中元素的父元素设置display：flex;justify-content: center; align-items: center;

/* html部分 */
<div class="box1">flex</div>
/* css部分 */
.box1{
		display: flex;
    justify-content: center;
    align-items: center;
}

（图1）

2、grid

grid布局也是一个极佳的解决办法，采用三行代码解决居中布局 display: grid; justify-items: center; align-items: center;

/* html部分 */
<div class="box0">grid</div>
/* css部分 */
.box0{
		display: grid;
    justify-items: center;
    align-items: center;
}

（图2）

（图3）

3、行内元素居中

行内元素即只占有自己元素本身大小的元素，用法很简单，水平上：文本对齐为居中对齐（text-align: center;）垂直上：行高设置为与盒子同高（line-height:Box_height)，通过以下代码你可以实现 图3 的第一部分行内元素标准流。

/* html部分 */
<div class="standard1 standard"><span>行内元素标准流</span></div>
/* css部分 */
.standard1 {
    text-align: center;
    line-height: 9.6rem;
    height: 9.6rem;
}

4、单个块级元素垂直水平居中

块级元素即单独占一行或多行，本身具有宽高与内外边距。单个块级元素居中只使用两行代码，即margin: auto；line-height:Box_height；text-align: center;

/* html部分 */
<div class="standard2">
            <p>法三:单个块级</p>
</div>
/* css部分 */
.standard2 p {
    width: 16rem;
    height: 9.6rem;
    margin: auto;
    text-align: center;
    line-height: 9.6rem;
}

5、多个块级元素垂直水平居中

这里只需要将块级元素设置为行内块元素再套用行内元素的居中模式即可

/* html部分 */
<div class="standard3 standard">
            <p>法四多个</p>
            <p>块级元素</p>
            <p>垂直水平居中</p>
</div>
/* css部分 */
.standard3 {
    height: 13rem;
    text-align: center;
    line-height: 4.3rem;
}

.standard3 p {
    display: inline-block;
    width: 20rem;
    height: 4.3rem;
    border: solid 1px red;
}

归纳 : 在3、4、5这3个方法中，都是作为一种标准流居中布局存在。它作为最基本的居中应用，现在仍然活跃在各大小项目css代码中。而我将这类居中布局分为三种内容：行内元素居中、单个块级元素水平居中、多个块级元素垂直水平居中。我们可以看到在 右图 之中存在两条灰黑色暗线，在此之中分为三大模块。

相同点：1、水平居中，text-align：center 2、垂直居中，行高设置与盒子高度相同

差异性：1、行内元素因为无边距值只需要设置文字水平与行高 2、块级元素为单个对齐时需要设置magin值为auto 3、多个块级元素居中时需要将块级元素转化为行内块元素，再设置其行高等于盒子高度与文字水平对齐才可以设置其居中（这也是这种标准流居中的一个弱点）

（图4）

6、负边距实现法

该方法对应效果图是图4的法六。我们都知道定位原理是子绝父相，首先利用该原理设置该盒子对父元素绝对，通过对top与left设置为50%，这个时候会发现它其实是跑到右下方的，原因在于盒子本身也是有宽高值，而这个时候我们就需要利用负边距将这个盒子重新拉回来，也就是拉回负的该盒子宽高的一半。这个时候我们就可以得到对于父元素完全居中对齐的盒子。

​ 注意，margin是由top到left，也就是说在设置负边距应该使用公式： -height，0，0，-width

/* html部分 */
<div class="box3">
            <div class="posation1"> HI!</div>
 </div>
/* css部分 */
.box3 {
    background-color: #4285f4;
    position: relative;
		width: 150px;
    height: 100px;
}
.posation1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -75px;
    text-align: center;
    line-height: 100px;
}

7、margin值法

该方法效果对应于图4的法七，这个方法原理是在于利用子绝父相原理，将子盒子确定在父盒子中，而margin设置为auto，因此边距可以自动占用所有空余空间，此时子盒子将会被挤向左上角。而设置left与top等值为0 ，也就是子盒子对应于父盒子为0距离，因此magin会将剩余空间平均的挤向子盒子使其贴紧父盒子，因此各个方向居中。

正常下margin为0 ，而设置auto后为margin将用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值，一侧auto，则auto为剩余空间大小 (2) 如果两侧均是auto，则平分剩余空间

/* html部分 */
<div class="box3 box34_init">
      <div class="posation2 p_init">IM </div>
 </div>
/* css部分 */
.box3 {
    position: relative;
}
.posation2 {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

8、calc动态计算法

该方法效果对应于图4的法八。如果你是一个熟悉css新特性的人，那么你对calc计算属性应该不会陌生了，它具有动态计算能力，解决了css无法计算的问题,原理与负边距法相同却节省了很多代码量。在利用这个特性处理居中的时候套用公式：

/* html部分 */
<div class="box3 box34_init">
            <div class="posation3  p_init">Aben</div>
 </div>
/* css部分 */
.posation3 {
    position: absolute;
    left: calc(50% - 75px);
    top: calc(50% - 50px);
}

归纳：在6、7、8这3个方法都是属于已知盒子大小通过计算得到居中效果。当我们在实际开发中都会遇到最常见的情况就是在知道盒子宽高大小的情况下，将这个盒子居中，而通常面对这类问题，我总结可以使用下列三种方法：负边距法、margin边距设置法、calc动态获取法。右图4，三个效果图分别对应于这三种方法。可以发现他们对于效果来说是没有区别的，有差异的就是在利用不同的代码去使用，而愿意使用何种，通过以上的解说后可任君选择！

（图5）

9、table-cell法

​ 当我们在设置html表格的时候会发现所有元素都跟事先说好的一样以居中的方式默认排列，为什么呢，原因在于table的display为table，而td的display为table-cell，因此通过将元素设置为table-cell便可以很轻松的实现居中。但是，需要强调一点是你需要明白其他样式属性是否符合你需求，因为这将是连锁反应。

/* html部分 */
<div class="box4 box34_init">
     <p>HTML</p>
</div>
/* css部分 */
.box4 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

10、translate法

​ translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置translate(-50%,-50%) ，作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，translate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中

/* html部分 */
<div class="box5 box34_init">
            <p>CSS</p>
</div>
/* css部分 */
.box5 {
    position: relative;
    background-color: #34a853;
}

.box5 p {
    font-size: 2rem;
    color: aliceblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

（图6）

11、伪元素居中法

/* html部分 */
<div class="box6 box34_init posation">
        <p class="bluebox">伪元素</p>
 </div>
/* css部分 */
.box6::before {
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.bluebox {
    display: inline-block;
    vertical-align: middle;
}

前人发展的道路中发现了不仅可以使用一些属性将元素居中，还可以使用伪元素这种奇招，利用伪元素::before和::after将盒子嵌套到需要摆放居中的盒子边。用法很简单：首先设置display：inline-block（因为vertical-align:middle只针对行内元素），其次设置vertical-align:middle使得目标盒子居于伪元素中间，最后将这个伪盒子高度设置为100%就大功告成了。

写在最后

接下来会完成什么作品：1、原生html、css的讲解 2、linux系统类，这是想通过写Linux来加深自己的学习 3、JS、Vue、TS，希望自己可以更加强大，并且通过自己的努力帮助更多努力前行的人。那么下期再见，拜拜~~