让一个元素水平居中很简单:如果是内联元素,可以在父元素上设置text-align: center
;如果是一个块元素,可以使用margin: auto
。
而垂直居中就复杂得多。
有如下样式:
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</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;
}
原理是先以元素左上角的点作为参考,将其居中到屏幕中心,在用负的margin
让元素便宜自身长宽的一半。
这个方案的缺点是需要固定元素的尺寸,这时候可以使用translate()
,让元素移动是相对于自身的宽度和高度的。
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
视窗单位的解决方案
CSS3定义了一种新单位,称为相对视窗(viewport-relative)长度单位。
vw
是相对于视窗的宽度,1vw
相当于视窗宽度的1%
。- 同理,
vh
是相对于视窗的高度。
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
Flexbox的解决方案
Flexbox是解决这类问题最好的方案,只需要在父元素上设置display: flex
,和在垂直居中的元素上设置margin: auto
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
使用这种方法,不必为元素设置宽度和高度。