css实现垂直居中的方法整理

1.表格布局法。（利用表格的显示模式）需要用到一些冗余的 HTML 元素，因此这里不多介绍。

2.行内块法。也不作讨论，因为在我看来这种方法 hack 的味道很浓。

如果你有兴趣，可以去看看 Chris Coyier 写的“不为人知的居中方法”（http://css-tricks.com/centering-in-the-unknown）。这篇出色的文章详细讲述了这两种技巧。

3.基于绝对定位实现的居中：

比如：

main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em; /* 6/2 = 3 */
margin-left: -9em; /* 18/2 = 9 */
width: 18em;
height: 6em;
}

这段代码在本质上做了这样几件事情：先把这个元素的左上角放置在视口（或最近的、具有定位属性的祖先元素）的正中心，然后再利用负外边距

把它向左、向上移动（移动距离相当于它自身宽高的一半），从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数，这段代码还可以省

掉两行声明：

main {
position: absolute;
top: calc(50% - 3em);

left: calc(50% - 9em);
width: 18em;
height: 6em;
}

显然，这个方法最大的局限在于它要求元素的宽高是固定的。在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果

能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了！遗憾的是，对于绝大多数 CSS 属性（包括 margin）来说，

百分比都是以其父元素的尺寸为基准进行解析的。

当我们在translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，而这正是我们所需要的。接下来，只要换用基于

百分比的 CSS 变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸写死了。这样我们就可以彻底解除对固定尺寸的依赖：

main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这种方法需要注意的地方：

我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈。

如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。这个问题可以用 transformstyle: preserve-3d 来修复，不过这个修复手段也可以认为是一个hack，而且很难保证它在未来不会出问题。

4.基于视口单位的解决方案

main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}

5.基于 Flexbox 的解决方案

body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}

请注意，当我们使用 Flexbox 时，margin: auto 不仅在水平方向上将元素居中，垂直方向上也是如此。还有一点，我们甚至不需要指定任何宽度（当

然，如果需要的话，也是可以指定的）：这个居中元素分配到的宽度等于 maxcontent。

Flexbox 的另一个好处在于，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。

我们先给这个 main 元素指定一个固定的尺寸，然后借助 Flexbox 规范所引入的 align-items 和 justify-content 属性，我们可以让它内部的文本也实现居中。

main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}