CSS 基础系列：水平垂直居中方案
比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类，一类目标元素是行内元素，一类目标元素是块级元素(其中，块级元素又包括定宽高和不定宽高）。
1.水平居中方案
1.1 行内元素水平居中 把该行内元素包裹在一个块级父元素中，之后设置父元素:
.parent{
text-align:center
}1.2 块级元素水平居中 设置该元素：
div{
width: 100px; /* 注意宽度一定要给出 */
margin: 0 auto; /* auto 是必须的 */
}1.3 多个块级元素水平居中
- 转换为行内元素。设置目标块级元素
display:inline-block，之后设置父元素：
.parent{
text-align:center
}- 利用弹性盒子。设置父元素：
.parent{
display:flex;
justify-content: center;
}2.垂直居中方案
2.1 单行行内元素垂直居中
设置块级父元素：
.parent{
/* 设置父元素的高度等于行高 */
height:100px;
line-height:100px;
}Tip)：这里的 line-height 最终是通过继承作用在子元素上的，所以也可以直接设置子元素为 line-height:100px。
2.2 多行行内元素垂直居中
设置父元素：
.parent{
display:table-cell;
vertical-align:middle;
}Tip): 注意父元素得有高度，否则默认高度由子元素撑起，就没有垂直居中的说法了。
2.3 已知高度的块级元素垂直居中
设置父元素：
.parent{
position:relative;
}设置子块级元素：
div{
position:absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}Tip): 原理是绝对定位。top:50% 确保了子元素位于父元素 1/2 分割线以下，margin-top: -50px代表子元素在这个基础上上移自身的一半高度，此时子元素与父元素中线重合，实现垂直居中。
2.4 未知高度的块级元素垂直居中
核心代码与上面一样，不过因为我们不知道子元素高度，也就不知道要在 top:50% 的基础上上移多少距离，因此把 margin-top:-50px 改为 transform: translateY(-50%);
3. 水平垂直居中方案
3.1 已知高度和宽度的元素
- 方法一：
设置父元素：
.parent{
position: relative;
}设置目标元素：
div{
position:absolute;
width:100px;
height: 100px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}Tip):这段代码比较优美和灵活。原理其实是：子元素依然相对于父元素定位，但是由于 top:0 和 bottom:0 无法同时满足，且该元素的 margin 又是自适应，因此最终变成了由上下外边距平分尺寸，从而达到垂直居中。至于水平居中，原理也是一样。
- 方法二：
设置父元素：
.parent{
position: relative;
}设置目标元素：
div{
position:absolute;
width:100px;
height: 50px;
top: 50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
}Tip)：原理和 2.3 其实一样，只是现在多了一个水平方向的居中。看下图：
3.2 未知高度和宽度的元素
设置父元素：
.parent{
position: relative;
}设置目标元素：
div{
position:absolute;
width:100px;
height: 50px;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}Tip): 原理和 2.4 一样，不同的是我们现在不知道子元素高度和宽度，也就不知道要在 top:50% 和 left:50% 的基础上再移动多少距离，因此把 margin-top:-25px 和 margin-left:-50px 对应改为 transform: translateY(50%，50%);
3.3 任意元素
- 3.3.1 利用弹性布局一
设置父元素：
.parent{
display:flex;
justify-content: center;
align-items: center;
}- 3.3.2 利用弹性布局二
设置父元素：
.parent{
display: flex;
}设置子元素：
div{
margin: auto;
}- 3.3.3 利用网格布局一
设置父元素：
.parent{
display: grid;
}设置子元素：
div{
justify-self:center;
align-self:center;
}- 3.3.4 利用网格布局二
设置父元素：
.parent{
display: grid;
}设置子元素：
div{
margin: auto;
}- 3.3.5 利用伪元素
设置父元素
.parent {
font-size: 0; /* 消除空隙 */
text-align: center; /* 实现水平居中*/
&::before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}设置子元素
div{
display: inline-block;
vertical-align: middle;
}参考： https://segmentfault.com/a/1190000003761600 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92