完美实现CSS垂直居中的11种方法

在做前端项目时CSS的水平居中我们经常使用，但有时还会用到CSS垂直居中，对于小白来说这个就有些难度了，下面看一下我是如何实现的

本人前端小白，正在做一个小程序开发的项目，css样式调整搞的头都大了。关于垂直居中，已尝试了文中的几个垂直居中css样式设置，已成功解决我的问题，故转载来备份下。

CSS垂直居中11种实现方法分别如下：

1. 使用绝对定位和负外边距对块级元素进行垂直居中

html代码：

<div id="box">    <div id="child">我是测试DIV</div></div>

css代码：

#box {     width: 300px;     height: 300px;     background: #ddd;     position: relative;} #child {     width: 150px;     height: 100px;     background: orange;     position: absolute; top: 50%;     margin: -50px 0 0 0;     line-height: 100px;}

运行结果如下：

这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。

2. 使用绝对定位和transform

html代码：

<div id="child">我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>

css代码：

#box {     width: 300px;     height: 300px;     background: #ddd;     position: relative;} #child {     background: #93BC49;     position: absolute;     top: 50%;     transform: translate(0, -50%);}

运行结果如下：

这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

3. 另外一种使用绝对定位和负外边距进行垂直居中的方式

html代码：

<div id="box">    <div id="child">我也是个测试DIV</div></div>

css代码：

#box {     width: 300px;     height: 300px;     background: #ddd;     position: relative;} #child {     width: 50%;     height: 30%;     background: pink;     position: absolute;     top: 50%;     margin: -15% 0 0 0;}

运行结果如下：

这种方式的原理实质上和前两种相同。补充的一点是：margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。

4. 绝对定位结合margin: auto

html代码：

<div id="box">    <div id="child">呆呆今天退役了(。﹏。)</div></div>

css代码：

#box {     width: 300px;     height: 300px;     background: #ddd;     position: relative;} #child {     width: 200px;     height: 100px;     background: #A1CCFE;     position: absolute; top: 0;     bottom: 0;     margin: auto;     line-height: 100px;}

运行结果如下：