在进行页面布局时，经常会遇到需要对元素进行垂直居中显示的情况，相比于水平居中，垂直居中的实现稍微复杂一点。很多时候只是在开发时查一下解决方案，解燃眉之急，但是要让你真正地手动实现，又可能会有点难度或是无从下手，比较实现的方法有很多。
本文就用代码和图示，对 CSS 实现元素居中的方法进行一个总结，分别对块级元素和行内元素单独进行详细说明。
块级元素垂直居中
首先对块级元素垂直居中的方法进行总结。
父元素高度已知
当父元素高度已知的情况下，要使该块级元素垂直居中，实现起来是比较简单的。
先来上代码：
以下块级元素垂直居中示例均使用上面的 HTML 结构。
对于父元素高度已知的情况下，从上面的代码可以看到，只需根据父元素高度设置块级元素的竖直方向偏移值即可。
块级元素高度已知，margin-top
上面的代码，给出的结果是块级元素高度已知的情况。
此时竖直方向偏移值计算方法为：
$$ \frac{height_{parent} - height_{child}}{2} $$
对应上面的代码就是：
$$ \frac{300 - 100}{2} = 100 $$
因此要实现垂直居中，只需设置块级元素 margin-top: 100px 即可。
块级元素高度未知，margin-top + transform
对于不知道块级元素高度的情况，同样也可以实现垂直居中。
方法很简单，先看代码：
这里用到了 CSS3 中的 transform 属性，对块级元素做转换处理，这里使用的值是 translateY 作 2D 转换，因为是垂直居中，只做了 Y 方向的处理。
注意： 需要浏览器支持
transform属性。
其实现思路与上面一种情况基本相同，设置块级元素的竖直方向偏移值。
为什么在不知道块级元素高度的情况下，还可以通过设置竖直方向的偏移值来实现呢？
这是因为，translateY 属性设置为50%，这里的百分比，是相对于元素本身的，也就是说，这里的translateY(-50%)，与上面一种情况的$- height_{child} / 2$ 结果完全相同。
两种情况对比
首先看一下 margin-top 的值：两种情况下，由父元素的高度决定的偏移值部分是不变的，都是
$$ \frac{height_{parent}}{2} = \frac{300}{2} = 150 $$
再来看一下块级元素引起的偏移值：
块级元素高度已知时，那么也可以通过
margin-top，在原基础上再向上偏移$- height_{child} / 2$即可，因此，俩个值叠加之后，就是第一种情况的结果。1
2
3
4
5
6
7
8/* 父元素高度决定的偏移 */
margin-top: 150px;
/* 在此基础上，在加上块级元素本身高度决定的偏移 */
margin-top: -50px;
/* 这里只是为了示例讲解，请勿同时书写多个属性，后者会覆盖前者 */
/* 因为属性相同，叠加之后的最终结果 */
margin-top: 100px;块级元素高度未知时，父元素部分不变，块级元素本身的偏移，通过 CSS3 的
transform属性实现，也就是第二种情况的结果。1
2
3
4/* 父元素高度决定的偏移 */
margin-top: 150px;
/* 块级元素本身的偏移 */
transform: translateY(-50%);
这里使用
margin-top属性，来控制父元素引起的偏移，只是其中一种方法，当然可以在父元素上添加padding-top或其他方式实现，这里只是提供一种思路，可以根据具体需要再做调整。
父元素高度未知
对于父元素高度未知的情况，看看以下一些具体情境。
块级元素与父元素高度相同
这种情况，非常简单，看代码：
直接给父元素设置 padding 属性即可。虽然这种情况看起来很简单，但是需要注意，确保父元素的高度由内容撑起来，或者设置一个刚好与块级元素实际高度相同的值（对于标准盒子模型，需要考虑 border，padding，margin属性）。
虽然简单，但是遇到这种场景，用起来还是很不错的。
块级元素与父元素高度无关系
父元素高度不知道，并且块级元素高度与父元素高度没有相关关系，也有很多种方式来实现块级元素的垂直居中。
下面一一列举：
以下均使用了绝对定位，虽然放在父元素高度不知道的情况，这里的意思是父元素的高度不会对 CSS 的写法产生影响，但是还是需要给父元素指定一个高度。
使用绝对定位加负边距
参考代码：
这种情况下，注意，父元素要设置 position: relative 属性，这样，块级元素的绝对定位才会相对父元素的位置做偏移。
使用绝对定位加transform
这种情况也可以考虑块级元素高度已知和高度未知两种情况。上面是块级元素高度已知的情况，高度未知的情况，同理，可以使用 transform 属性。
代码如下，就不做详细阐述了。
使用绝对定位加margin
这两种情况与已知父元素高度的情况类似，下面看一个使用绝对定位配合 margin: auto 实现垂直居中的方式。
注意：这种情况下，需要给块级元素 height 设置一个值，当然这个值是任意的，如果不设置，就会与父元素高度相同；并且，要设置块级元素的 top 和 bottom 属性，确保两者值相等，我这里设置的都是 0 ，然后使用margin，在垂直方向上设置auto即可，当然水平方向同理也可实现。
使用 flex 布局
这种方式，是我用的最多也最喜欢用的一种方式，能够灵活的对元素布局进行控制。
flex 布局也叫弹性盒子布局，使用该方式，能够轻松地实现元素垂直居中。
目前，该属性的浏览器兼容性已经很好了，除非要适配 IE 9 及以下的浏览器。
元素放在垂直方向
我们来看一下代码：
这种情况，通过 justify-content: center 来实现垂直居中的。
这是元素放在垂直方向的情况，还可以放在水平方向。
元素放在水平方向
元素放在水平方向时，通过 align-items: center 来实现垂直居中。
flex 属性里的知识点还有很多，而且非常实用，这里只讲解实现垂直居中的内容，想要了解更多，可以查看博客Flex 布局教程：语法篇，阮一峰老师还是强啊！
块级元素的垂直居中方法就先列举这么多，后面如果有其他实现方式再做补充。
下面来看一下行内元素的垂直居中方法。
行内元素垂直居中
下面我们来看一下行内元素垂直居中的实现方法。
以下行内元素垂直居中示例均使用上面的 HTML 结构。
父元素高度已知
同样，我们先来看父元素高度已知的情况。
line-height 属性
很简单的一种实现方式，直接将行内元素的line-height属性值设置为父元素的高度即可。也是我使用最多的一种方式。
父元素上使用 line-height 属性
另一种使用line-height属性的方式是，在父元素上设置 line-height，值与父元素的高度相同，然后在行内元素上设置 vertical-align: middle。
这在对图片进行垂直居中的时候，非常好用。
父元素高度未知
我们再来看看父元素高度未知的情况。
display: table-cell
通过对父元素设置display: table-cell和vertical-align: middle，也可实现行内元素的垂直居中。
绝对定位
实现方式与块级元素的情况基本相同，不做赘述。
flex 布局
flex 布局的上面两种写法与块级元素的情况基本相同，不做赘述。
我们来看一下第三种写法：
设置元素水平方向放置，并设置垂直方向 margin: auto 即可。
先列举这些吧，有需要再做补充。
总结
简单总结一下，主要分块级元素和行内元素两种情况。
块级元素
- 父元素高度已知时，可使用
margin和transform实现 - 父元素高度未知时，可使用
padding，绝对定位和 flex 布局实现
行内元素
- 父元素高度已知时，可使用
line-height实现 - 父元素高度未知时，可使用
table-cell，绝对定位和 flex 布局实现
当然，对行内元素添加 display: block/inline-block 时，可参考块级元素的实现，不做详述。