CSS 居中的方法实在是太多啦,每次光靠 Google 去搜都要费好大力气。看了 Centering in CSS: A Complete Guide 才清楚了许多,对自己的认识做个总结。
[TOC]
水平居中
inline 和 inline-* 元素
在一个 block-level 中的 inline
, inline-block
, inline-table
, inline-flex
元素,居中只需要一行:
.center-children {
text-align: center;
}
block-level 元素
将左右的 margin
设置升 auto
就可以让一个 block-level 元素居中,常常见到这种写法:
.center{
margin: 0 auto;
}
简写虽然方便,但是如果不希望上下 margin
设置为 0,此写法就会带来副作用。分别设置会更安全些:
.center{
margin-left: auto;
margin-right: auto;
}
至少两个的 block-level 元素
多个 block-level 的元素在居中在一行,需要将 display: block
改为 display: inline-block
然后设置其父元素的 text-align
,具体见下样例:
或者,你也可以使用 flexbox 呀~ 这个稍后说。
垂直居中
垂直居中会稍微麻烦一丢
inline 和 inline-* 元素
有一个简单粗暴的方法:直接设置上下 padding
相等。不过有时候,这个方法不是那么有效。
只有一行
因为只有一行,所以能设置 line-height
和 height
相等完成居中。
存在多行
如果是自己设置的 table-cell
元素,需要设置 vertical-align: middle;
完成居中。在 td
这项属性值是默认的,不要设置。详见样例:
巧了,你也可以使用 flexbox 呀~ 这个稍后再说。
一个 block-level 元素
有些时候我们未必会知道 block-level 元素的高度,这取决于其内部放置的元素。如果不用 flexbox 的话,需要分情况讨论:
已知高度
已知高度的话,先学会算数,再学会定位,用样例说话:
未知高度
未知也没关系,设置 top: 50%
,这样元素的顶部就处于父元素正中间,再让其向上平移自身 50%(transform: translateY(-50%);
)的高度,其内容就居中了。可以自己编辑样例试试:
当然,你也可以使用 flexbox 呀~ 这个还是稍后再说。
水平垂直居中
可以通过以上方法的组合按自己喜欢的方式完成水平居中。其中通过定位对各个浏览器都比较友好,水平居中直接设置 top: 50%; left: 50%;
;垂直居中按照「已知高度」和「未知高度」的思路区分实现,注意在「未知高度」时还要兼顾 x 方向平移 50%(即 transform: translate(-50%, -50%)
)。
使用 flexbox!!!
如果不需要考虑部分老旧浏览器的兼容问题,那么 flexbox 则是万能了。强烈推荐学习并使用 flexbox,会省下不少功夫!怎么学习?青蛙会告诉你~
思考
这里说得所有居中,都是浏览器认为的居中,有时与人类眼中的居中,是不同的。例如,将单行内容为 。。。
的文字按以上任一方法垂直居中,其显示效果是偏下的。原因归根于,我们看到的文字是基于像素的,浏览器看到的文字是基于当前选用的字体信息,可以通过这篇文章(或其译文)了解大概。对于文字,浏览器认为的居中未必是像素居中。所以,某个大字标题在网页中的居中效果和设计稿中不同时,不要太惊讶。
参考
- Centering in CSS: A Complete Guide
- CSS 元素居中对齐大法