前端新人的 CSS 与居中小结

[banxi1988]

点击查看此文示例 Demo 文件

在 CSS 中居中是一个常见的问题，也是一个基本问题。既然是常见的基本问题，那真是有必要加以研究和加以总结。

行内元素的居中

使用 text-align:center 实现行内元素的水平居中

text-align:center 估计是最古老 CSS 居中技术了。 适用于文本，span,a等行内元素。

使用 line-height 实现行内元素实现垂直居中

这一技巧也是适用于行内元素。 具体的实现是将 line-height 设置成跟元素高度一致来实现行内元素的垂直居中。 详情见示例中 .primary-button 类的 CSS。

块元素居中技术

块元素水平居中经典技术：margin 与 auto

以前块级元素居中常用的技术便是通过如下的设置来实现块级元素的水平居中.(此法不适用内联块级元素)

div {
  width: 720px; /*指定块元素的宽度*/
  margin: 0 auto; /*指定自动计算左右外边距*/
}

块元素水平居中新手法: transform

可以通过如下属性实现块级元素及内联块级元素的水平居中。

margin-left: 50%;
transform: translateX(-50%);

值得说明的是，此方法无法实现垂直居中，因为margin-top:50% 相当于 margin-top: 最近的块元素容器的宽度 ,所以margin 中的百分比的计算方式限制其无法应用于垂直居中.

居中大法: flex

flex 布局技术的出现，解决了 CSS 没有正式的居中布局技术的尴尬。 以 flex-direction 的默认设置 flex-direction:row 为例。 justify-content:center 可实现水平居中对齐，align-items:center 可实现垂直居中对齐。 flex 作为通用的布局技术，居中只是其中的一点点组合特性。

值得注意的是，除了使用 flex, CSS 中没有其他的能用的垂直居中的技术。

[MuscleOf2016]

水贴吗

[yangg]

值得注意的是不知道的别下结论

[banxi1988]

@yangg #2
sorry, 文中有一个错别字， “能” > "通"
> 值得注意的是，除了使用 flex, CSS 中没有其他的通用的垂直居中的技术。
五笔前端新手让您见笑了。

[dr2009]

还有可以利用 `display:tabel-cell` 居中

上个国外的一份总结...
https://codepen.io/shshaw/full/gEiDt

[qiutianaimeili]

grid 布局比 flex 布局还要厉害，而且还有很多居中的奇技淫巧，说的这么绝对不太好吧。

[molvqingtai]

position: absolute;
left:0;
right:0;
margin:0 auto;

[banxi1988]

@molvqingtai #6 我刚测试了一下，此 css 无法实现垂直居中。（ Chrome: 68 ）

[dr2009]

@banxi1988 那个你可以试下
position: absolute;
left:0;
right:0;
top:0;
left:0;
margin: auto;

父元素 position: relative;

[banxi1988]

@qiutianaimeili #5 grid 看了感觉比较复杂，学不动了。目前主要依靠 flex 搞定一切。
感谢 flex 拯救我这种前端新手。忙起来时，根本没空去研究那些个奇技。

[banxi1988]

@dr2009 真不行，上面介绍的文章我也初略看了一下。
嗯，我创建了个 jsfiddle，如果可以的话，你可以修改看看，看是否能使用绝对布局实现垂直居中。或者是还需要其他结构的配合，不过如此看来 flex 居中实现还是比较通用些。
http://jsfiddle.net/01527xba/7/

[dr2009]

@banxi1988 你代码写错了...两个 right:0 .少了 top:0

[dr2009]

@banxi1988 移动端可以无脑 flex. pc 如果不兼容 ie9 以及以下的话也可以无脑 flex..

[banxi1988]

@dr2009 感谢. 不过应该是适合需要显式指定一个合适的高度的场景。
还是喜欢无脑 flex, 我目前的项目都是无脑 flex.

[yikyo]

transform 可以垂直居中

position: absolute;
top:50%;
transform: translateY(-50%);

父元素 position: relative;

[suzic]

还有种 inline-block 的，左侧放一个空元素