本文主要针对子元素已知宽高和未知宽高的情况下，对其进行水平垂直居中
本文假设对如下元素进行水平垂直居中方式（父元素和子元素）：
<div class="parent">
<div class="children size"></div>
</div>
首先给他们加一个公共使用的样式（本文介绍的方法有定宽和不定宽的，所以size用来表示children的宽高）
.parent {
border: 1px solid red;
width: 600px;
height: 600px;
}
.children {
background: green;
}
.children .zise {
width: 200px;
height: 200px;
}
子元素相对父元素进行绝对定位，左和上边距为50%，此时子元素左上顶点在元素的正中间，只需要让子元素的中心点在父元素正中间即可：
1. absolute + 负margin
.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
- 次方法兼容性较好，只是只适用于必须知道子元素的宽高
2. absolute + margin auto
通过设置各个方向距离都是0，然后再将margin设为auto
.parent {
position: relative;
}
.children {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
- 兼容性好，可是需要知道子元素的宽高
absolute + calc
calc()属于CSS3，用于动态计算长度值。
.parent {
position: relative;
}
.children {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
- 此方法属于css3，属于依赖于需要支持该语法才可以，且需要知道子元素宽高
以下方法都是子元素未知的情况：
4. absolute + transform 移动
使用css3新属性transform的translate, 其属性的百分比是相对于自身的宽和高进行移动。
.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
在一些浏览器中可能会出现模糊，是因为元素有可能被放置在办个像素的位置上，可通过以下方法解决此问题：
transform-style: preserve-3d;
- 此方法需要依赖translate2d的兼容性，且不需要知道子元素宽高
5. line-height 属性
利用行内元素的属性实现居中：
.parent {
line-height: 600px;
text-align: center;
}
.children {
display: inline-block;
vertical-align: middle;
line-height: initial;
}
- 此时子元素文字居中显示
text-align: left; /* 修正文字 */
6. writing-mode
writing-mode可以改变文字的显示方向,比如可以通过writing-mode让文字的显示变为垂直方向:
<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
writing-mode: vertical-lr;
}
这样可以改变文字的显示方向
具体实现方式如下：
<div class="wp">
<div class="wp-inner">
<div class="box"></div>
</div>
</div>
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}
7. table
tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了,table会增加代码的冗余性：
<table>
<tbody>
<tr>
<td class="parent">
<div class="children">子元素-表格</div>
</td>
</tr>
</tbody>
</table>
.parent {
text-align: center;
}
.children {
display: inline-block;
}
- 这种方法就是代码太冗余，而且也不是table的正确用法
8. css-table
css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中：
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
9. flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}
- 移动端已完全支持flex，PC端需要看浏览器的兼容性
10. grid
css新出的网格布局，但是兼容性不好
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
- 该方法兼容性不如flex
总结：
- PC端有兼容性要求，宽高固定，推荐absolute + margin auto
- PC端有兼容要求，宽高不固定，推荐css-table
- PC端无兼容性要求，推荐flex
- 移动端推荐使用flex
注：本文主要参考此篇文章CSS实现水平垂直居中的1010种方式（史上最全）
