问题
44年前我们把人送上月球，但在CSS中我们仍然不能很好实现垂直居中—— @James Anderson让一个元素水平居中对于CSS来说非常简单：如果是一个内联元素，我们可以在他的父元素上设置
text-align:center;；如果是一个块元素，我们可以使用
margin:auto;。然而，只要一想到让一个元素垂直居中，让人死的心都有了。 多年来，垂直居中已成为CSS的不朽神话，也是前端专业人士群体中的一个内部笑话。原因是：
- 经常需要使用
- 理论上看上去非常简单
- 过去实战中要实现是极其困难，特别是元素大小固定时
- 表格布局不讨论(表格显示模式)，因为它需要一些冗余的HTML标签
inline-block方法不包括，因为要使用很多Hack手段
<body>元素中插入下面的标签：
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main>
background、
padding等等：
[metaslider id=250]
id="pJKdoz" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/pJKdoz?height=400&theme-id=0&slug-hash=pJKdoz&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
绝对定位解决方案
最早实现垂直居中的技术是元素需要一个固定的宽度和高度：main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em; /* 6/2 = 3 */
margin-left: -9em; /* 18/2 = 9 */
width: 18em;
height: 6em;
}
id="zGambr" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/zGambr?height=400&theme-id=0&slug-hash=zGambr&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
从本质上讲，它将元素的左上角点移到视窗中心点，然后使用负的
margin(使用
margin-top和
margin-left)，而且
margin的值是元素宽度和高度的一半，使元素的中心点与视窗的中心点重合。如果使用
calc()可以减少两个样式：
main {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
id="GJGYax" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/GJGYax?height=400&theme-id=0&slug-hash=GJGYax&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
显然，这种方法最大的问题是，元素需要一个固定的尺寸，而需要垂直居中元素的尺寸常常是需要由它的内容来决定。如果我们有办法使用百分比来控制元素尺寸，我们的问题就解决了。不幸的是，对于大多数CSS属性（包括
margin）百分比的值是相对于其父元素的宽度来决定。 在CSS中常常可以看到很多解决方案是不可思议。在这个例中，就可以使用CSS3的
transform。可以在
transform中的
translate()使用百分比，让元素移动是相对于自身的宽度和高度，这种方案正是我们需要的。
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
id="waXQKN" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/waXQKN?height=400&theme-id=0&slug-hash=waXQKN&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
当然，没有哪门技术是完美的，在实际使用中要注意一下以下几个事项：
- 绝对定位通常不是一个很好的选择，因为它对整体的布局影响相当的大。
- 如果垂直居中元素的内容比视窗高度更高的话，它的顶部会被裁剪掉，如下图所示。但是这个问题可以解决，只不过需要使用一些Hack手段。
- 在一些浏览器中，可能会导致元素出现略微的模糊，那是因为元素有可能被放置在半个像素位置上。我们可以通过
transform-style:preserve-3d来解决，尽管这是一个Hack手段，不能保证它不会过时。
视窗单位的解决方案
如果想避免使用绝对定位，我们仍然可以使用translate()方法，其值刚好是元宽度和高度的一半。然而，我们如何不使用
top和
left将元素从
top和
left移动
50%的偏移量呢？ 首先想到的是给
margin属性一个百分数，像这样：
main {
width: 18em;
padding: 1em 1.5em;
margin: 50% auto 0;
transform: translateY(-50%);
}
这产生了非常奇怪的效果。主要原因是
margin的百分比计算是相对于父容器的
width来计算。是这样的，甚至包括
margin-top和
margin-bottom。 值得庆幸的是，如果我们想让元素在视窗中居中，还是有希望的。
CSS Values and Units Level 3定义了一种新的单位，称为相对视窗(
viewport-relative)长度单位。
vw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%，而不是100%- 与
vw相似的是，1vh相当于视窗高度的1% - 如果视窗的宽度小于高度，
1vmin等于1vw，反之，如果视窗宽度大于高度，1vmin等于1vh - 如果视窗的宽度大于高度，
1vmax等于1vw，反之，如果视窗宽度小于高度，1vmax等于1vh
margin的值设置
vh单位：
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
id="BNVGwE" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/BNVGwE?height=400&theme-id=0&slug-hash=BNVGwE&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
正如你看到效果很完美。
当然，这种方法有用性是有极限的，因为它只适用于元素在视窗中垂直居中。
请注意，还可以使用相对视窗单位来创建全屏效果，而且不需要使用任何脚本。更多细节可以阅读 Andrew Ckor写的《 Make full screen sections with 1 line of CSS》博文。
Flexbox的解决方案
这无疑是最好的解决方案，因 Flexbox的出现就是为了解决这样的问题。其他解决方案仍然可用，唯一原因是他们能更好的在浏览器上呈现，不过Flexbox在现代浏览器也得到更好的好支持。 只需要两个样式，在需要垂直居中的父元素上设置display:flex(这个示例中就是
<body>)和在垂直居中的元素上设置
margin:auto（这个示例中就是
<main>）:
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
id="mJKaMy" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/mJKaMy?height=400&theme-id=0&slug-hash=mJKaMy&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
注意，当使用Flexbox和
margin:auto时，元素不仅水平居中，而且也会垂直居中。也注意，我们甚至没有设置宽度(如果我们想要也可以设置)，其实指定的宽度相当于
max-content。 如果浏览器不支持Flexbox，那么结果看起来就会像下图（如果我们给元素设置了宽度）：
即使不是垂直居中，还是可以接受的。 Flexbox的另一个优点是，可以让匿名容器垂直居中。例如，我们将结构换成：
<main>Center me, please!</main>
align-items和
justify-content属性使设置固定尺寸的
<main>容器里面的文本居中。如下图所示：
我们可以在
<body>和需要居中的元素
<main>使用相同的属性，同时使用
margin:auto做为备用，以于优雅降级。
main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}
id="oXyJdr" class="cp_embed_iframe undefined" src="http://codepen.io/airen/embed/oXyJdr?height=400&theme-id=0&slug-hash=oXyJdr&default-tab=result&user=airen" width="300" height="400" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen">
新特性：对齐所有东西
CSS Box Alignment Level 3已经在计划，在未来我们甚至不需要使用不同的布局模式就能非常容易的实现垂直居中，我们只需要像下面这样做：align-self: center;
本文作者： Mrcxt
查看更多内容： 进入Mrcxt的wordpress博客
4265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
