css 实现水平垂直居中

1、绝对定位，四个方向为0（子元素可以是块级元素也可以是行内元素）

.parent{ position:relative}

.child{ 

 margin:auto; 

 height:100px;

 width:100px; 

 position:absolute;

 top:0; 

left:0;

 bottom:0; 

right:0;

}

1（1）已知子元素宽高

.parent{ position:relative;}

.child{ 

 width:100px; 

 height:100px; 

 position:absolute; 

 top:50% ; 

 left:50%; 

 margin:-50px 0 0 -50px;

}

2、绝对定位+transform

.parent{ position:relative; } 

 .child{ 

 position:absolute;

 left:50%; 

 top:50%; 

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

transform-style:preserve-3d;/*变换后修复元素模糊*/

 }

2（2）calc方式

.parent{position: relative;}

.child{ 

 position: absolute; 

 top: calc(50% - 30px);

 left: calc(50% - 50px); 

 width: 100px;

 height: 60px; 

 }

3、flex布局方式

.parent{ 

 display:flex; 

 justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

}

4、table写法(被居中元素为inline或inline-block)

.parent{

    display:table-cell;

    text-align:center;

    vertical-align:middle;

}

---

水平居中

对于行内元素(inline)：text-align: center;

对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto

对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局

---

垂直居中

对于行内元素(inline)

单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等

多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

对于块级元素(block)：下面前两种方案，父元素需使用相对布局

已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox：选择方向，justify-content: center；

---

PC端有兼容性要求，宽高固定，推荐absolute + 负margin

PC端有兼容要求，宽高不固定，推荐css-table

PC端无兼容性要求，推荐flex

移动端推荐使用flex