前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。
我们主要从这几个方面来了解下居中：
- 水平居中
- 垂直居中
- 水平垂直居中
水平居中
水平居中又分为：
- 文字水平居中
- 图片水平居中
- 已知元素宽度的水平居中
- 未知元素宽度的水平居中
文字水平居中
实现文字的水平居中，是最为简单的了，加上text-align: center;即可，看以下代码：
<p class="text-center">
文字水平居中
</p>.text-center {
text-align: center;
}注意：父元素必须是
块级元素，即display: block;至于什么是
块级元素，不在本文讨论的范围
图片水平居中
图片水平居中跟文字一样，也是使用text-align: center;
非图片文本元素，已知宽度的水平居中
方法一：margin: 0 auto;
比如div元素，假设我们已经知道它的宽度是300px,这时候我们就可以这样设置,加上margin: 0 auto;这句代码。
<div class="div1">
我是水平居中的div
</div>.div1 {
width: 300px;
margin: 0 auto;
}同样是针对块级元素才有效果。
方法二：绝对定位+负边距
<div class="parent3">
<div class="child3"></div>
</div>.parent3 {
position: relative;
}
.child3 {
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px; // 宽度的一半
}非图片文本元素，未知宽度的水平居中
方法一：使用text-align: center + inline-block
我觉得比较简单的方法就是给父元素设置text-align: center;给子元素添加display: inline-block;这样就行了，还是来看代码比较直接。
<div class="parent">
<div class="child">未知元素宽度</div>
</div>.parent {
text-align: center;
}
.child {
display: inline-block;
padding: 20px;
background: red;
}方法二：使用绝对定位 + transform: translate()
父元素设置相对定位position: relative;;子元素设置绝对定位position: absolute加transform。看以下例子：
<div class="parent">
<div class="child">我是水平居中的div</div>
</div>.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
padding: 20px;
background: red;
}注意：为了更好的兼容性，transform需要加上不同浏览器的前缀。
方法三：使用浮动
还是来看具体的代码：
<div class="parent2">
<div class="child2">我是水平居中的div</div>
</div>.parent2 {
position: relative;
float: left;
left: 50%;
}
.child2 {
position: relative;
right: 50%;
padding: 20px;
background: red;
}方法四：flex实现水平居中
<div class="parent4">
<div class="child4">我是水平居中的div</div>
</div>.parent4 {
position: relative;
display: flex;
justify-content: center;
}
.child4 {
padding: 20px;
background: red;
}注意：flex有兼容性问题，关于flex的兼容性写法，大家可以自行百度下，也可以在
caniuse查看浏览器的兼容情况
方法五：fit-content属性
“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果。这个方法也是我第一次用到，后期有时间再来仔细研究学习下。
来看代码：
<div class="fitContentDiv">
我是水平居中的div
</div>.fitContentDiv {
width: fit-content;
margin: 0 auto;
height: 100px;
background: red;
padding: 20px;
}必须配合margin: 0 auto;来使用来可以实现居中的效果。
注意：同样是存在浏览器的兼容性问题。
垂直居中
- 文字的垂直居中
- 图片的垂直居中
- 已知元素高度的垂直居中
- 未知元素高度的垂直居中
文字的垂直居中
方法一：height=line-height
这个比较简单，只需要设置高度height和行高line-height相等即可。看代码：
<p class="txt1">
我是垂直居中的文字
</p>.txt1 {
height: 100px;
line-height: 100px;
background: red;
}注意：这个方法有个不好的地方就是只能是针对单行的文字，多行就不适合用。
方法二：使用padding
我们设置padding-top和padding-bottom相等就可以了，而且此方法针对多行文字也没问题。看代码：
<p class="txt2">
我是垂直居中的文字
</p>.txt2 {
padding-top: 20px;
padding-bottom: 20px;
background: red;
}注意：这种方法也是有一个明显的缺陷，就是你不能给文本的父元素设置高度。
方法三：table+table-cell
此方法是利用表格单元格的特性，我们直接看代码：
<div class="parent6">
<div class="child6">我是垂直居中的文字（这里面也可以放图片）</div>
</div>.parent6 {
display: table;
width: 300px;
height: 300px;
background: blue;
}
.child6 {
display: table-cell;
vertical-align: middle;
}此方法对图片同样有效，而且文本也可以多行，是一种不错的方法。
图片的垂直居中
使用vertical-align: middle，直接看代码：
<p class="img-va-center">
<img src="https://via.placeholder.com/150" alt="">
</p>.img-va-center {
height: 300px;
line-height: 300px;
background: red;
}
.img-va-center img {
display: inline-block;
vertical-align: middle;
}已知元素高度的垂直居中
方法一：绝对定位+负边距
看代码：
<div class="parent6">
<div class="child6">我是垂直居中的div</div>
</div>.parent6 {
position: relative;
height: 300px;
background: red;
}
.child6 {
position: absolute;
top: 50%;
left: 0;
width: 50px;
height: 50px;
margin-top: -25px;
background: gray;
}未知元素高度的垂直居中
方法一：绝对定位+transform
直接上代码了：
<div class="parent7">
<div class="child7">我是垂直居中的div</div>
</div>.parent7 {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.child7 {
position: absolute;
top: 50%;
width: 50px;
padding: 10px;
background: gray;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}注意：同样需要考虑
transform的兼容性问题。
方法二：flex+margin
<div class="parent8">
<div class="child8">我是垂直居中的div</div>
</div>.parent8 {
display: flex;
width: 300px;
height: 300px;
background: blue;
}
.child8 {
margin: auto;
padding: 20px;
background: gray;
}注意：此方法要考虑flex的兼容性问题。
方法三：flex+align-items
<div class="parent9">
<div class="child9">我是垂直居中的div</div>
</div>.parent9 {
display: flex;
align-items: center;
width: 300px;
height: 300px;
background: blue;
}
.child9 {
padding: 20px;
background: gray;
}注意：此方法要考虑flex的兼容性问题。
水平垂直居中
水平垂直居中就是把水平居中跟垂直居中的方法结合起来使用啦，这里就不再举例了。
总结
这里虽然列举了那么多例子，但是方法终归是死的，业务需求是变化多端的，具体还是要根据我们项目的业务需求来搭配使用。css很强大，要实现同一个功能，可以有很多种方法，并不只有我列举的这些，关键是要找到适合业务需求的方法，如果你有更好的方法，欢迎留言讨论，大家一起学习进步！
