CSS 居中大全

我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记。
孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法”呢,哈哈,先备着吧~~
各种方法各有利弊,大家自己权衡吧,至少在需要居中时多个思路。


不建议用了。

text-align:center
在父容器里水平居中 inline 文字,或 inline 元素

vertical-align:middle
垂直居中 inline 文字,inline 元素,配合 display:table ,display:table-cell,有奇效。

line-height
与 height 联手,垂直居中文字

margin:auto

hacks, hacks(小技巧)
有许多 hacks ,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。

translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。

示例:

这个技巧相当嚣张,同样适用于没固定大小的内容,min-width,max-height,overflow:scroll等。

绝对定位居中
父容器元素:position: relative

注意:高度必须定义,建议加 overflow: auto,防止内容溢出。

视口居中
内容元素:position: fixed,z-index: 999,记住父容器元素 position: relative

响应式
百分比宽高,最大、最小宽度均可以,加 padding 也可以

偏移
只要 margin: auto; 在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。

溢出
居中内容比父容器高时,防止溢出,加 overflow: auto (没有任何 padding 时,也可以加 max-height: 100%;)。

调整尺寸
resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 overflow: auto 。

图像
图像同样适用,设置 height: auto;

可变高度
高度必须定义,但可以是百分比或 max-height。不想定义高度的话,用 display: table (需要考虑 Table-Cell 兼容性)。

负 margin
确切知道宽高,负 margin 是宽和高的一半。

Table-Cell
参考文章:Flexible height vertical centering with CSS, beyond IE7

HTML结构:

CSS样式:

FlexBox
参考文章:Designing CSS Layouts With Flexbox Is As Easy As Pie

感谢原作者:http://www.csswang.com/exp/5837.html