CSS垂直水平居中汇总
1.块级元素水平居中
方法解读：
- 块级元素水平居中是指块级元素相对于自己的包含块水平居中，方法为对块级元素设置margin:0 auto;
- 如果块级元素变成float或者absolute的话，那么这个方法失效。
- 代码写为margin:auto;在这种场景下等价于margin:0 auto;
div#wrap{
width:300px;
height: 300px;
background-color: pink;
}
div#test{
width:100px;
height: 100px;
background-color: deeppink;
margin: 0 auto;
}2.行内元素的水平居中
直接用text-align属性的center值即可搞定，text-align属性的含义就是块级元素中的行内内容的对齐方式。
3.块级元素的垂直水平居中
三种方法，都是基于绝对定位的
（1）方法1：已知宽度和高度 + left:50% + top:50% + margin-left:自身border-box宽度一半的负值 + margin-top:自身border-box高度一半的负值
（2）方法2：left:50% + top:50% + transform(-50%,-50%,0)
（3）【推荐】方法3： 已知宽度和高度 + left:0 + right:0 +top:0 + bottom:0 + margin:auto
- 方法1 ：需已知尺寸
#wrap{
position: relative;
width:400px;
height: 300px;
background-color: pink;
}
#test{
position: absolute;
left:50%;/*包含块宽度的百分比*/
top:50%;/*包含块高度的百分比*/
margin-left:-50px;/*元素自身宽度的一半*/
margin-top:-50px;/*元素自身高度的一半*/
width:100px;
height: 100px;
background-color: deeppink;
}- 方法2 ：无需尺寸，适合尺寸不固定的场景，比如多行文本
这是一段文本啊啊啊
这是一段文本啊啊啊
这是一段文本啊啊啊
这是一段文本啊啊啊
这是一段文本啊啊啊
这是一段文本啊啊啊
#wrap{
position: relative;
width:400px;
height: 300px;
background-color: pink;
}
#test{
position: absolute;
left:50%;/*包含块宽度的百分比*/
top:50%;/*包含块高度的百分比*/
transform: translate3d(-50%,-50%,0);/*宽度和高度不固定*/
background-color: deeppink;
}- 方法3：需已知尺寸
原理是如下公式：
left+margin+border+padding+width+right = 占据包含块（元素padding box）的宽度
top+margin+border+padding+height+bottom = 占据包含块（元素padding box）的高度
#wrap{
position: relative;
width:400px;
height: 300px;
background-color: pink;
}
#test{
position: absolute;
left:0;
right: 0;
top:0;
bottom: 0;
margin:auto;
width:100px;
height: 100px;
background-color: deeppink;
}4.图片垂直水平居中（inline-block元素垂直水平居中）
方法解读：由于图片是inline-block元素，所以水平居中使用text-align:center;即可，关键是垂直居中，但是肯定会涉及到vertical-align:middle。方法是利用vertical-align:middle。
代码
- 图片设置为vertical-align:middle;
#wrap{
width:300px;
height: 300px;
border:1px solid;
margin:0 auto;
text-align: center;
}
#wrap img{
vertical-align: middle;
}- 给图片的包含块元素添加一个:after伪元素，伪元素的特点有5个，也就是5条规则
#wrap:after{
content:"";
height: 100%;/*相对于#wrap*/
width:0;
background-color:pink;
display: inline-block;/*与图片成为兄弟行内元素*/
vertical-align: middle;
}5.单行文本垂直居中
一般指的是一个块级元素比如
等元素的内容为一个单行文本，方法为让块级元素的line-height与height相等，更优雅的方式是只给块级元素设置line-height而不设置height，这样也能实现效果，因为height此时会被其中的内容默认撑开。
下面的效果是单行文本垂直居中+水平居中
这是一段单行文本
div#wrap{
line-height: 60px;/*也可以加上height:60px;*/
background-color: pink;
width: 200px;
text-align: center;/*块级元素中的行内内容的水平对齐方式*/
}6.多行文本垂直居中
其实这个问题需要看承装多行文本的元素的display：
- （1）如果是block元素，那么就用块级元素的垂直水平居中的第二种方法，也就是尺寸不固定时的块级元素的垂直水平居中。
- （2）如果是inline-block元素，那么就参考图片的垂直水平居中方法
- （3）如果是inline元素，那么就将其转化为inline-block或者block咯
- （4）建议把block元素转化为inline-block元素，然后用（2），也就是无论是什么类型的元素，都建议用（2）
（1）如果是block元素
这是一段文本
这是一段文本
这是一段文本
这是一段文本
这是一段文本
div#wrap{
position: relative;
width:300px;
height: 300px;
background-color: pink;
}
p#test{
position: absolute;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
background-color: deeppink;
}（3）如果是inline元素
这是一段文本
这是一段文本
这是一段文本
这是一段文本
这是一段文本
div#wrap{
width:300px;
height: 300px;
background-color: pink;
}
span#test{
display: inline-block;
background-color: deeppink;
vertical-align: middle;
}
div#wrap:after{
content: "";
display: inline-block;
height: 100%;
width:0;
vertical-align: middle;
}
div#wrap{
text-align: center;/*让整个span在#wrap中水平居中*/
}（4）把block元素转化为inline-block
这是一段文本
这是一段文本
这是一段文本
这是一段文本
这是一段文本
div#wrap{
width:300px;
height: 300px;
background-color: pink;
}
p#test{
display: inline-block;
background-color: deeppink;
vertical-align: middle;
}
div#wrap:after{
content: "";
display: inline-block;
height: 100%;
width:0;
vertical-align: middle;
}
div#wrap{
text-align: center;
}
7.总结
上述不同场景的垂直水平居中其实会有重合的地方，但是每个场景总会有最适合自己的方案，一般来说，能不提升层级就不提升层级，也就是尽量少使用float和position:absolute。如果是在面试中，那么不同的场景的考察点是不同的，比如图片垂直水平居中的考察点是vertical-align的应用，单行文本垂直居中的考察点是line-height的应用，多行文本垂直居中最好的方案也是转化为inline-block从而利用和图片一样的方案，而块级元素垂直水平居中就是绝对定位和margin的应用。水平居中就比较简单了，块级元素的水平居中使用margin:0 auto;而行内元素（inline、inline-block）的水平居中就是其父级块元素的text-align:center;。此外还要掌握不同的盒模型的特点：浮动盒模型、绝对定位盒模型和普通盒模型，它们的包含块分别是什么，以及它们的层级，是否具有包裹性等等特点。