在css中对元素进行水平居中：如果它是一个行内元素，就对它的父元素应用text-align：center；如果它是一个块级元素，就对它自身应用margin：auto；。
首先我们定义一个宽和高分别为350px、150px的矩形：
<div class="content">
</div>
* {
margin:0;
}
.content {
width:350px;
height:150px;
background:#ace;
}
效果如下：
1. 绝对定位
它要求元素具有固定的宽度和高度：
.content {
width:350px;
height:150px;
background:#ace;
position:absolute;
top:50%;
left:50%;
margin-top:-75px; /* 150/2 = 75 */
margin-left:-175px; /* 350/2 = 175 */
}
先把这个元素的左上角放置在视口的正中心，然后再利用负外边距把它向左、向上移动元素自身一半长度值。从而把元素的正中心放置在视口的中心，实现垂直居中的效果。
然而借助 calc() 函数，这段代码还可以省略：
.content {
width:350px;
height:150px;
background:#ace;
position:absolute;
top: calc(50% - 75px);
left: calc(50% - 175px);
}
显然，这个方法最大的局限在于它要求元素的宽高是固定的。
在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以自身的宽高作为解析基准，就好了。那便是** translate（）变形**。
position:absolute;
top: 50%；
left: 50%；
transform:translate(-50%,-50%);
上面这个方法也有一些需要注意的地方：
- 我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈。
- 如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。
- 某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上，这个问题可以用 transform-style:preserve-3d 来修复，不过这个很难保证它在未来不会出现问题。
2 基于视口单位的解决方案
假如我们不用绝对定位，仍然可以用 translate() 技巧来把这个元素以其自身宽高的一半为距离进行移动。但是在缺少 left 和 top 的情况下，该怎么办呢？
首先想到的可能是用 margin 属性的百分比值来实现：
margin:50% auto 0;
transform:translateY(-50%);
不过结果却很离谱：
这时因为 margin的百分比值是以父元素的宽度作为解析基准的。不过如果只是想把元素相对于视口进行居中，仍然是有希望的：
- vw是与视口宽度相关。1vw实际上表示视口宽度的1%，而不是100%。1vh 表示视口高度的1%。
- 当视口宽度小于高度时，1vmin 等于1vw，否则等于1vh。
- 当视口宽度大于高度时，1vmax 等于1vw，否则等于1vh。
在我们这个例子中，适用于外边距的是vh单位：
margin:50vh auto 0;
transform:translateY(-50%);
不过这个技巧的实用性是相当有限的，因为它只适用于在视口中居中的场景。
3 基于 Flexbox 的解决方案
这可以算是最佳的解决方案了，因为它是专门针对这类需求所设计的。我们只需要写两行声明即可：先给这个待居中元素的父元素设置display：flex，再给元素自身设置 margin：auto；
body {
display:flex;
min-height:100vh;
}
.content {
margin:auto;
}
当我们使用 flexbox 时，margin：auto；不仅在水平方向上将元素居中，垂直方向上也如此。我们甚至不需要指定任何宽度。
如果浏览器不支持flexbox,页面渲染结果看起来就只是水平方向上居中。虽然没有垂直居中，但也还可以接受。
flex 的另外一个好处在于，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。假如结构代码是这样的：
<div class="content">你居中吧</div>
先给这个main元素指定一个固定的尺寸，然后借助 flexbox 规范所引用的 align-items 和 justify-content 属性，可以让内部的文本也实现居中。
body {
display:flex;
min-height:100vh;
background:#F8F8F8;
}
.content {
width:350px;
height:150px;
background:#ace;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
}
参考书籍：Lea Verou《CSS揭秘》
网友评论