“44年前我们就把人类送上月球了，但现在我们仍然无法在CSS中实现垂直居中”
James An derson
使用如下代码结构，并且直接插<body>元素中：
<main>
<h1>Am I centered yet?</h1>
<p>Center me,please!</p>
</main>
一、基于绝对定位的解决方案
我们先来看一个早期的垂直居中方法，它要求元素具有固定的宽度和高度：
main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
width: 18em;
height: 6em;
}
借助强大的calc函数，这段代码还可以省略两行声明：
main {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
显然，这个方法的最大的局限在于它要求元素的宽高是固定的。遗憾的是，对于绝大多数CSS属性（包括margin）来说，百分比都是以其父元素的尺寸为基准进行解析的。
在这个例子中，答案来自CSS变形属性。当我们在translate()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，而这正是我们所需要的。
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
二、基于视口单位的解决方法
margin的百分比值都是以父元素的宽度作为解析基准的。以下代码不出效果
main {
width: 18em;
padding: 1em 0.5em;
margin: 50% auto 0;
transform: translateY(-50%);
}
CSS值与单位定义了一套新的单位，称为视口相关的长度单位。
1、vw是与视口宽度相关的。与常人的直觉不符的是，1vw实际上表示视口宽度的1%，而不是100%。
2、与vw类似，1vh表示视口高度的1%。
3、当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。
4、当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
三、基于Flexbox的解决方法
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
Flexbox的另外一个好处在于，它哈可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。举个例子，假设我的结构代码是：
<main>Center me，please!</main>
我们先给这个main元素指定一个固定的尺寸，然后借助Flexbox规范所引入的align-items和justify-content属性，我们可以让它内部的文本也实现居中
main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}
网友评论