网页内容“垂直居中”的几个常用方法及利弊
在CSS中对元素进行水平居中是这样：如果它是一个行内元素，就对它应用text-align:center;，如果它是一个块级元素，就对它自身应用margin:auto;。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。
多年以来，垂直居中已经成为CSS领域的传说，它同样也是前段开发圈内广为流传的笑话。原因在于它具有以下几条特征。
它是极其常见的需求；
从理论上来看，它似乎极其简单；
在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此；
这里我们就从这样一段代码开始，我们将它直接插入元素<body>里：
<main> <h1>我是垂直居中的案例</h1> <p>麻烦给我垂直居中下</p> </main>
基于绝对定位的解决方案
我们先来看一个早期的垂直居中方法，它要求元素具有固定的宽度和高度：
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属性来说，百分比都是以其父元素的尺寸为基准进行解析的。
当我们在transform()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行转换和移动的，而这正是我们所需求的。接下来，只要换成基于百分比的CSS变形来对元素进行偏移就可以了：
main{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
}我是垂直居中的案例
麻烦给我垂直居中下
从上面这个效果我们可以看出，已经非常完美了，但这个方法使用上也应该有一些需要注意的地方：
我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈；
如要需要居中的元素已经在高度上超过了视口，那它的顶部将会被裁掉。有一些办法可以绕过这个问题，但hack味道过浓。
在某些浏览器中，这个方法可能导致元素的显示有一些模糊，因为元素可能被放置在某半个像素上。这个问题可以用
transform-style:preserve-3d来修复，不过修复手段也可以认为是一个hack，而且很难保证它在未来不会出问题。
基于视口单位的解决方案
假设我们不想使用绝对定位，仍然采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动；但是在缺少left和top的情况下，如何把这个元素的左上角放置在容器的正中心呢？
我们第一反应可能是用margin属性的百分比值来实现，就像这样：
main{
width:18em;
padding:1em 1.5em;
margin:50% auto 0;
transform:translateY(-50%);
}不过，这段代码产生十分离谱的效果。原因是在于margin的百分比值是以父元素的宽度作为解析基准的。没错，即使对于margin-top和margin-bottom来说也是这样的。
我是垂直居中的案例
麻烦给我垂直居中下
不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关长度单位。
vw是视口宽度相关的。与常人的直觉不符的是，1vw实际上表示视口宽度的1%，而不是100%；
与vw类似，1vh表示视口高度的1%;
当视口宽度小于高度时，1vmin等于1vw，否则等于1vh；
当视口宽度大于高度时，1vmin等于1vh，否则等于1vw。
在我们的这个例子中，适用于外边距的是vh单位：
main{
width:18em;
padding:1em 1.5em;
margin:50vh auto 0;
transform:translateY(-50%);
}当然，这个技巧只适用于视口的居中效果。
基于Flexbox的解决方案
这是毋庸置疑的最佳解决方案，因为Flexbox(伸缩盒)是专门针对这类需求所设计的。我们之所以讨论其他方案，仅仅是因为这些方案在浏览器的支持上稍微好一些而已。其实目前现代浏览器对Flexbox的支持度已经相当不错了。
我们只需两行声明即可，先给这个待居中元素的父元素设置display:flex(这个例子中是<body>元素)，再给这个元素(<main>元素)自身设置我们熟悉的margin居中：
body{
display:flex;
min-height:100vh;
margin:0;
}
main{
margin:auto;
}请注意，当我们使用Flexbox时，margin:auto不仅是在水平方向上将元素居中，垂直方向上也是如此。还有一点，我们甚至不需要指定任何宽度：这个居中元素分配到的宽度等于max-content。
Flexbox的另外一个好处在于，它可以将匿名容器(即没有被标签包裹的文本节点)垂直居中，举个来说，假如我们的结构代码是这样：
<main>我是匿名容器</main>
我们先给这个main元素指定一个固定的尺寸，然后借助flexbox规范所引入的align-items和justify-content属性，我们可以让它内部的文本也实现居中。
main{
display:flex;
align-items:center;
justify-content:center;
width:18em;height:6em;
}其他相关方法与未来技术
有几种非主流的方法(表格布局法、行内块法)也可以实现这个效果，我们在这里不做讨论，有兴趣的朋友可以查阅下Chris Coyier写的"不为人知的居中方法”。
根据盒对齐模型(第三版)的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊布局模式了。只要下面这段代码就可以搞定了。期望它能早点被多数浏览器所实现：
align-self:center;
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
