多年来，垂直居中问题一度成为前端开发者的热门话题。因为这个需求极其常见，但又看似简单，实施起来很难，尤其是涉及到尺寸不固定的情况时。
html基本结构
<main>
<h1>我是居中的吗？</h1>
<p>请让我保持居中显示</p>
</main>
css基本结构
body{
background: #DBDCFF;
text-align: center;
}
1、基于绝对定位的方案
我们先来看两个早期的实现方法，它要求元素必须有固定的宽高度：
第一种需要计算margin-top和margin-left的值
main{
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
width: 18em;
height: 6em;
background: #C88F6E;
}
第二种就相对简洁了许多
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 18em;
height: 6em;
margin: auto;
background: #C88F6E;
}
效果如图：
固定宽高，绝对定位实现居中
上面的方法最大的局限就是前面说的，它要求元素必须宽高度是固定的，在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容决定的。那么，如果可以找到一个属性的百分比值以元素自身的宽高作为解析基准，那么我们的难题也就迎刃而解了！
我们或许可以从CSS变形属性中了解一下，当我们在translate()变形函数中使用百分比值时，是以该元素的自身宽度和高度为基准进行换算和移动的。有了这个属性，我们就可以这样解决了：
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #C88F6E;
}
效果如图：
宽高度不固定，绝对定位实现居中
这种方法很好的满足了我们的需求，但是也有一些需要注意的地方：
-
实际项目中，有时不能选用绝对定位，因为它对整个布局影响过大
-
如果我们需要被居中的元素高度已经超过了视口，那它的顶部将会被截掉
-
在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能放置在半个像素上。
2、基于视口单位的方案
CSS值与单位（第三版）定义了一套新的单位，称为视口相关的长度单位。
-
vw是与视口宽度相关的。与常人理解不同的是，1vw实际上表示视口宽度的1%，而不是100%。
-
与vw类似，1vh表示视口高度的1%。
-
当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。
-
当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。
了解了以上规则，我们就可以利用它来尝试解决垂直居中的问题：
main{
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
background: #C88F6E;
}
效果如图：
高度不固定，利用视口实现居中
3、基于Flexbox的方案
很明显这是一个目前为止的最佳方案，而且现代浏览器已经对Flexbox有相当不错的支持度了。
具体代码如下：
body{
background: #DBDCFF;
text-align: center;
display: flex;
min-height: 100vh;
margin: 0;
}
main{
margin: auto;
background: #C88F6E;
}
效果如图：
使用Flexbox实现居中
当我们使用Flexbox时，margin:auto不仅在水平方向上将元素居中，在垂直方向上也是如此。
网友评论