居中方案

发表于   |   分类于

让一个元素水平居中很简单：如果是内联元素，可以在父元素上设置text-align: center；如果是一个块元素，可以使用margin: auto。

而垂直居中就复杂得多。

有如下样式：

1
2
3
4
<main>
     <h1>Am I centered yet?</h1> 
     <p>Center me, please!</p> 
</main>

绝对定位解决方案

1
2
3
4
5
6
7
8
9
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()，让元素移动是相对于自身的宽度和高度的。

1
2
3
4
5
6
main { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

视窗单位的解决方案

CSS3定义了一种新单位，称为相对视窗（viewport-relative）长度单位。

  • vw是相对于视窗的宽度，1vw相当于视窗宽度的1%。
  • 同理，vh是相对于视窗的高度。
1
2
3
4
5
6
main { 
    width: 18em; 
    padding: 1em 1.5em; 
    margin: 50vh auto 0; 
    transform: translateY(-50%); 
}

Flexbox的解决方案

Flexbox是解决这类问题最好的方案，只需要在父元素上设置display: flex，和在垂直居中的元素上设置margin: auto

1
2
3
4
5
6
7
8
body { 
    display: flex; 
    min-height: 100vh; 
    margin: 0; 
}
main { 
    margin: auto; 
}

使用这种方法，不必为元素设置宽度和高度。