css实现盒子水平垂直居中的4种方式

让盒子水平垂直居中的几种方式

使用margin

使用margin可以让盒子实现水平居中，实现的方式是

 margin:0px auto;
 让盒子水平居中对齐

使用定位实现

使用定位可以实现盒子水平垂直居中(子绝父相)+位移

 position:absolute;
 top:50%;向下移动父盒子的百分子50%.
 left:50%;向左移动父盒子的百分之50%
 transform:translate(-50%) (-50%); 位移盒子只能移动盒子本身的距离，正好向反方向移动自身的50%就可以实现居中效果。

使用定位实现（2）

使用定位可以实现盒子水平垂直居中(子绝父相)，定位不用位移，用margin

 position:absolute;
 top:50%;向下移动父盒子的百分子50%.
 margin-left:(盒子的一般距离);向左移动盒子的百分之50
 margin-top:(盒子的一般距离);向上移动盒子的百分之50
 ; 位移盒子只能移动盒子本身的距离，正好向反方向移动自身的50%就可以实现居中效果。

使用定位实现（3）

使用定位可以实现盒子水平垂直居中(子绝父相)，定位不用位移

 .box {
     position:absolute;
     top:0px;
     left:0px;
     right:0px;
     bottom:0px;
     margin:auto;
 }

使用display：flex（弹性布局）来实现

使用弹性布局实现盒子水平垂直居中，先将盒子放在一个弹性容器内，然后在设置主轴和侧轴的对齐方式来达到水平垂直居中的效果

 .box {
     display:flex;
     justify-content:center;设置弹性盒子主轴居中对齐
     align-items:center;设置弹性盒子侧轴对齐
 }
 ​
 ​
 ​