聊聊css居中那点事

前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。

本文章更多注重的是工作中实战的经验，如果大家想了解理论方面的东西，可以自行百度。

我们主要从这几个方面来了解下居中：

水平居中

垂直居中

水平垂直居中

水平居中

水平居中又分为：

文字水平居中

图片水平居中

已知元素宽度的水平居中

未知元素宽度的水平居中

文字水平居中

实现文字的水平居中，是最为简单的了，加上 即可，看以下代码：

注意：父元素必须是 ，即display: block;至于什么是 ，不在本文讨论的范围

图片水平居中

图片水平居中跟文字一样，也是使用

非图片文本元素，已知宽度的水平居中

方法一：margin: 0 auto;

比如div元素，假设我们已经知道它的宽度是300px,这时候我们就可以这样设置,加上 这句代码。

同样是针对 才有效果。

方法二：绝对定位+负边距

非图片文本元素，未知宽度的水平居中

方法一：使用text-align: center + inline-block

我觉得比较简单的方法就是给父元素设置 给子元素添加 这样就行了，还是来看代码比较直接。

方法二：使用绝对定位 + transform: translate()

父元素设置相对定位 ;子元素设置绝对定位 加 。看以下例子：

注意：为了更好的兼容性，transform需要加上不同浏览器的前缀。

方法三：使用浮动

还是来看具体的代码：

方法四：flex实现水平居中

注意：flex有兼容性问题，关于flex的兼容性写法，大家可以自行百度下，也可以在caniuse查看浏览器的兼容情况

方法五：fit-content属性

“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果。这个方法也是我第一次用到，后期有时间再来仔细研究学习下。

来看代码：

必须配合 来使用来可以实现居中的效果。

注意：同样是存在浏览器的兼容性问题。

垂直居中

文字的垂直居中

图片的垂直居中

已知元素高度的垂直居中

未知元素高度的垂直居中

文字的垂直居中

方法一：height=line-height

这个比较简单，只需要设置高度 和行高 相等即可。看代码：

注意：这个方法有个不好的地方就是只能是针对单行的文字，多行就不适合用。

方法二：使用padding

我们设置 和 相等就可以了，而且此方法针对多行文字也没问题。看代码：

注意：这种方法也是有一个明显的缺陷，就是你不能给文本的父元素设置高度。

方法三：table+table-cell

此方法是利用表格单元格的特性，我们直接看代码：

此方法对图片同样有效，而且文本也可以多行，是一种不错的方法。

图片的垂直居中

使用 ，直接看代码：

已知元素高度的垂直居中

方法一：绝对定位+负边距

看代码：

未知元素高度的垂直居中

方法一：绝对定位+transform

直接上代码了：

注意：同样需要考虑 的兼容性问题。

方法二：flex+margin

注意：此方法要考虑flex的兼容性问题。

方法三：flex+align-items

注意：此方法要考虑flex的兼容性问题。

水平垂直居中

水平垂直居中就是把水平居中跟垂直居中的方法结合起来使用啦，这里就不再举例了。

总结

这里虽然列举了那么多例子，但是方法终归是死的，业务需求是变化多端的，具体还是要根据我们项目的业务需求来搭配使用。css很强大，要实现同一个功能，可以有很多种方法，并不只有我列举的这些，关键是要找到适合业务的需求，如果你有更好的方法，欢迎留言讨论，大家一起学习进步！