CSS垂直居中指南

CSS垂直居中指南

CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。

不管容器里的内容显示为行内、块级或者其他形式，这种方法都有效，但有时我们想给容器设置固定高度，或者无法使用内边距，因为想让容器内另一个子元素靠近容器的顶部或者底部。

这在等高列中也是一个常见的问题，尤其是用浮动布局这种较传统的技术实现时。还好CSS表格和Flexbox能够轻松实现居中。（如果用传统的技术，需要用别的办法处理内容居中。）不同的情况有不同的处理方法，具体参考如下所示。

在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。其中一些技术会在后面的章节中介绍，可根据情况翻阅对应的内容寻找答案。

❑ **可以用一个自然高度的容器吗?**给容器加上相等的上下内边距让内容居中。

❑ **容器需要指定高度或者避免使用内边距吗？对容器使用display: table-cell和vertical-align: middle。

❑** 可以用Flexbox吗？ ** 如果不需要支持IE9，可以用Flexbox居中内容。参见第5章。

❑ **容器里面的内容只有一行文字吗？**设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。

❑ **容器和内容的高度都知道吗？**将内容绝对定位。（只有当前面提到的方法都无效时才推荐这种方式。）

❑ ** 不知道内部元素的高度? ** 用绝对定位结合变形（transform）。（还是只有当前面提到的方法都无效时才推荐该方法。)

还不确定的话，参考howtocenterincss网站。这个网站很不错，可以根据自己的场景填写几个选项，然后它会相应地生成垂直居中的代码。