让一个元素水平居中很简单: 如果是内联元素, 可以在父元素上设置 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;
- }
使用这种方法, 不必为元素设置宽度和高度
来源: https://juejin.im/entry/5a8bf2aef265da4e983f1bf1