css居中的最佳实践

居中是 css 中很重要的一个基础知识,主要分三个方向讨论:

  1. 水平居中 or 垂直居中
  2. 文本居中 or 容器居中(块级元素)
  3. 设置父容器 or 设置自身 or 都需要设置

最佳实践

最佳实践,都是通过给父容器设置样式,来使内容达到居中效果。这个设计哲学也是非常正确的,我们确实应该通过操作父容器来让其内容居中,居中并非是子元素需要考虑的事(因为子元素可能有多个,且其自身可能比较复杂)。

文本居中

水平居中

文本水平居中使用text-align: center;

1
2
3
4
5
.center{
text-align: center;
border: 2px solid red;
}
<div class="center">我是文本</div>

这个非常好使,单行和多行文本都可以处理。

text-align 文档

垂直居中

使用 line-height 可以调节文本的垂直间距,从而达到垂直居中的效果,不过如果是多行文本的话,需要知道行数,但大多数情况下都是不知道行数的,所以一般用于单行文本的垂直居中场景。

实验地址:https://replit.com/@liuqinh2s1/cssTest3#src/App.css

实际上多行文本垂直居中可以用跟容器居中一样的方法:flex 布局:

同样的也适用于单行,甚至单行文本水平居中也可以用 flex 布局,但多行文本水平居中不可以用 flex 布局

容器居中

容器居中的最佳实践是 flex 布局。如果想看详细的教程,推荐这个:Flex 布局教程:语法篇 - 阮一峰的网络日志

实验地址:https://replit.com/@liuqinh2s1/css-center#index.html

水平居中

如果是水平排布的,设置justify-content: center;

1
2
3
4
5
6
7
8
.center {
display: flex;
justify-content: center;
}
<div class="center">
<div>a</div>
<div>b</div>
</div>

如果是垂直排布的,设置align-items: center;

1
2
3
4
5
6
7
8
9
.center {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<div>a</div>
<div>b</div>
</div>

垂直居中

与上面水平居中的写法正好相反

如果是水平排布的,设置align-items: center;

1
2
3
4
5
6
7
8
.center {
display: flex;
align-items: center;
}
<div class="center">
<div>a</div>
<div>b</div>
</div>

如果是垂直排布的,设置justify-content: center;

1
2
3
4
5
6
7
8
9
.center {
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="center">
<div>a</div>
<div>b</div>
</div>

所以总结如下:除多行文本水平居中必须用text-align: center;外,其余情况,全部可以用 flex 布局解决。

补充

利用 position,50%和 transform 自身的一半高来达到居中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent{
height: 200px;
border: 2px solid red;
position: relative;
}
.child{
height: 100px;
border: 1px solid blue;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
<div class="parent">
<div class="child">1</div>
</div>