CSS垂直居中与水平居中的一些方法

1、Line-height

适用情景：单行文字（垂直居中）

原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。

.example{width:400px;background:#afddf3;line-height:50px;}

2、absolute + margin 负值

原理：设置绝对定位，top: 50%;后，再设置高度一半的负值实现。说来说去，这就是一道简单的数学题而已。

.example{position: relative;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{position: absolute;top:50%;height:80px;margin-top: -40px;width:300px;font-size:15px;background:#afddf3;}

3、absolute + margin auto

原理：当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin: auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了。

.example{position: relative;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{position: absolute;top:0;bottom:0;left:0;right:0;margin: auto;height:80px;width:300px;font-size:15px;background:#afddf3;}

4、absolute + translate

原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。

.example{position: relative;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{position: absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:15px;background:#afddf3;}

5、Flex + align-items

适用情景：多行文字（垂直居中）

原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS。

.example{display: flex;align-items: center;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{font-size:15px;background:#afddf3;}

6、Flex + justify-content

适用情景：多行文字（水平居中）

原理：弹性布局，justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，参考CSS-TRICKS。

.example{display: flex;justify-content: center;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{height:80px;font-size:15px;background:#afddf3;}

7、Flex + :before + flex-grow

适用情景：多行文字（垂直居中）

原理：弹性布局，Flex-direction：column;将项目垂直显示，正如一个列一样。flex-grow: [number];规定项目将相对于其他灵活的项目进行扩展的量，参考CSS-TRICKS。

.example{display: flex;flex-direction: column;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example:before{content:'';flex-grow: .5;}.example.con{font-size:15px;background:#afddf3;}

8、Flex + margin

.example1display: flex;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{margin: auto;width:300px;font-size:15px;background:#afddf3;}