垂直居中的一些方式
1.flex 布局
eg: css
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
background-color: red;
margin: auto;
}
html:
<main>
Center me, please!
</main>
好处:不需要设置宽度;
方法2: 利用position:absolute绝对定位。 需要设置宽度和高度。
html 同上:
css:
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;
}
方法3.基于适口单位的解决方案:(这个技巧的实用性是有限的,因为只适用于适口居中的场景。)
vw:是指与适口宽度相关的。1vw实际上表示适口宽的1% 并不是100%;
vh:与vw是一样,表示适口的高度1%;
档适口宽度<适口高度时,1vmin=1vw,否则==1vh;
当适口宽度>适口高度时,1vmax=1vw,否则==1vh;
css:
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
方法4: 可以利用translate() 变形。当我们在translate()变形中使用百分比,是以这个元素自身的宽度和高度为基准进行换算和移动的。 不需要宽或者高。 这样我们就可以解除 对固定尺寸的依赖。 代码如下:
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
当然,没有任何技巧是十全十美的,方法4也有一些需要注意的地方。
„ 我们有时不能选用绝对定位,因为它对整个布局的影响太过强烈。
„ 如果需要居中的元素已经在高度上超过了视口,那它的顶部会被视
口裁切掉。有一些办法可以绕过这个问题,但 hack
味道过浓。
„ 在某些浏览器中,这个方法可能会导致元素的显示有一些模糊,因
为元素可能被放置在半个像素上。这个问题可以用 transform-
style: preserve-3d 来修复,不过这个修复手段也可以认为是一个
hack,而且很难保证它在未来不会出问题。