CSS实现水平垂直居中

1. 行内元素实现水平垂直居中： text-align: center; line-height: ;

2.块元素实现水平垂直居中的四种方式：

①：使用弹性盒模型

.box{

display：flex；

justify-content：center；

alingn-items：center；

}

②：用绝对定位配合magin（缺点：需要只要准确的宽高）

.box{

position：relative；

}

div{

position: absolute;

left:50%;

top:50%;

margin-left:（宽的一半）；

margin-top:（高的一半）；

}

③：利用css变形属性transform完成（不需要知道具体宽高）

.box{

position：relative；

}

div{

position: absolute;

left:50%;

top:50%;

transform: translate(-50%,-50%);（向左上角平移自身宽度的一半）

}

④：利用绝对定位完成

div{

position: absolute;

left:0;

top:0;

right:0;

bottom: 0;

margin:auto;

}

多行文本实现水平垂直居中：（利用表格的特性）

.box    { display: table;

        }

div{

 display: table-cell;

 vertical-align: middle;

        }