居中是 css 中很重要的一个基础知识,主要分三个方向讨论:
- 水平居中 or 垂直居中
- 文本居中 or 容器居中(块级元素)
- 设置父容器 or 设置自身 or 都需要设置
最佳实践
最佳实践,都是通过给父容器设置样式,来使内容达到居中效果。这个设计哲学也是非常正确的,我们确实应该通过操作父容器来让其内容居中,居中并非是子元素需要考虑的事(因为子元素可能有多个,且其自身可能比较复杂)。
文本居中
水平居中
文本水平居中使用text-align: center;
:
1 | .center{ |
这个非常好使,单行和多行文本都可以处理。
垂直居中
使用 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 | .center { |
如果是垂直排布的,设置align-items: center;
:
1 | .center { |
垂直居中
与上面水平居中的写法正好相反
如果是水平排布的,设置align-items: center;
:
1 | .center { |
如果是垂直排布的,设置justify-content: center;
:
1 | .center { |
所以总结如下:除多行文本水平居中必须用text-align: center;
外,其余情况,全部可以用 flex 布局解决。
补充
利用 position,50%和 transform 自身的一半高来达到居中:
1 | .parent{ |