css 关于垂直居中

垂直居中的一些方式

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，而且很难保证它在未来不会出问题。