元素水平垂直居中的5种方式

1、利用弹性盒子

将父元素设置为display:flex;

通过：

 justify-content: center;

 align-items: center;

来设置元素的垂直水平居中

2、将元素转化为表格的形式

父元素设置：

 display: table-cell;

 vertical-align: middle;

 text-align: center;

子元素需设置：

display: inline-block;

 vertical-align: middle;//消除行内块元素三像素问题

3、利用绝对定位

将父元素设置为相对定位

position:relative;

子元素设置绝对定位

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto

4、利用translate

将父元素设置为相对定位

position:relative;

子元素设置绝对定位

position: absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

子元素的宽高自己设置

5、利用 margin-top: ;和margin-left: ;

将父元素设置为相对定位

position:relative;

子元素设置绝对定位

position: absolute;

top:50%;

left:50%;

margin-top:-(自身高度的一半） ;

margin-left:-（自身宽度的一半） ;

例：

.child{

width: 100px;

height: 100px;

position: absolute;

top:50%;

left:50%;

margin-top: -50px;

margin-left: -50px;