前端面试之盒子（文字）水平垂直居中的方法

方法综合一览就get

类型	分类	重点代码的区别
定位	子绝父相（经典方法）	父盒子：position: relative; 子盒子：position：absolute;   top: 50%;   left: 50%;   margin-top: -50px;(盒子的一半）   margin-left: -50px;
	margin:auto	父盒子：position: relative; 子盒子：position：absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;
	计算父子盒子之间的距离	子盒子：margin-top:200px(根据父子盒子的宽高来算） margin-left: 200px;
flex布局	display：flex	父盒子：display:flex; justify:conter；//让子元素水平居中 align-items: center；//让子元素垂直居中
		父盒子：display:flex; 子盒子：margin: auto;
		父盒子：display:flex; 子盒子：align-self: center; margin: 0 auto；
css3新增属性	display: table-cell	父盒子： display:table-cell vertical-align: middle; text-align: center;//让盒子的文字水平居中 子盒子：display: inline-block;//转换为行内块元素才能让父盒子里的text-align:center生效
		父盒子： display:table-cell vertical-align: middle; 子盒子：margin: auto;
	transform	父盒子：position：relative； 子盒子：position: absolute; top: 50%; left: 50%; transform: translate(-50%，-50%）
grid布局	display: grid	父盒子：display: grid; 子元素： justify-self: center; align-self: center;

方法一，利用定位（子绝父相）

.parent {
        width: 500px;
        height: 100px;
        border: 1px solid #000;
        position: relative;
    }
    
    .child {
        width: 100px;
        height: 100px;
        border: 1px solid #999;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }

<div class="parent">
        <div class="child">我是子元素</div>
    </div>

可以看见，效果图中盒子是在盒子内居中的，但是文字并没有在盒子内居中，这时给父盒子加上text-align:center,给子盒子设置line-height(值等于自盒子的高度）就能使文字在子盒子内水平垂直居中,但这仅限于文字只有一行的时候才可行。

    ​ .parent {
        width: 500px;
        height: 100px;
        border: 1px solid #000;
        position: relative;
        text-align: center;
    }
    
    .child {
        width: 100px;
        height: 100px;
        line-height: 100px;
         border: 1px solid #999;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: 50px;
        margin-left: 50px;
    }

当有多行文字时，可以利用display: table（设置在父元素上）和display: table-cell（设置在子元素上），代码如下所示：

  .parent {
        display: table;
        text-align: center;
        margin: 100px auto;
        background: #fff;
        border: 1px solid #000;
    }
    
    .child {
        display: table-cell;
        vertical-align: middle;
        width: 500px;
        height: 200px;
        border: 1px solid #999;
    }

​
  <div class="parent">
        <div class="child">
            我有好多行</br>
            我有好多行</br>
            我有好多行</br>
            我有好多行
        </div>

​

方法二，利用定位（margin：auto）

  .parent {
        width: 500px;
        height: 100px;
        border: 1px solid #000;
        position: relative;
        text-align: center;
    }
    
    .child {
        width: 100px;
        height: 100px;
        line-height: 100px;
        border: 1px solid #999;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

后面还有好多种方法可以使盒子水平居中，参照表格中的内容一一尝试即可，方法多种多样，没有一劳永逸的方法，都需要多练习，在不同的情况下更好地使用这些方法。