CSS 居中大全

 

 引用：http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/

CSS 居中大全

AUG 13TH, 2013 | COMMENTS

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

<center>

不建议用了。

text-align:center

在父容器里水平居中 inline 文字，或 inline 元素

vertical-align:middle

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

line-height

与 height 联手，垂直居中文字

margin:auto

示例：

1 2 3 4 5

<style> #ex2_container { width:200px; background-color:yellow; } #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; } </style> <div id="ex2_container"><div id="ex2_content">Hello World</div></div>

hacks, hacks（小技巧）

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

translate(-50%,-50%)

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

参考文章：居中百分比宽高的元素

示例：

1 2 3 4 5

<style> #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; } #ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; } </style> <div id="ex3_container"><div id="ex3_content">Hello World</div></div>

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

绝对定位居中

父容器元素：position: relative

1 2 3 4 5 6 7 8

.Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

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

视口居中

内容元素：position: fixed，z-index: 999，记住父容器元素 position: relative

1 2 3 4 5 6 7 8 9

.Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; }

模态窗口实例

响应式

百分比宽高，最大、最小宽度均可以，加 padding 也可以

1 2 3 4 5 6 7 8 9 10 11

.Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

偏移

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

1 2 3 4 5 6 7 8 9

.Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; }

溢出

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

1 2 3 4 5 6 7 8 9

.Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

调整尺寸

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

1 2 3 4 5 6 7 8 9 10 11

.Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

图像

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

1 2 3 4 5 6 7

.Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

可变高度

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

1 2 3 4 5 6 7 8

.Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

负 margin

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

1 2 3 4 5 6 7 8 9

.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }

Table-Cell

参考文章：Flexible height vertical centering with CSS, beyond IE7

结构：

1 2 3 4 5 6 7

<div class="Pos-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> &lt!-- CONTENT --> </div> </div> </div>

样式：

1 2 3 4 5 6 7 8 9

.Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }

FlexBox

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }

参考资料： 
* Absolute Horizontal And Vertical Centering In CSS 
* Absolute Centering in CSS 
* CENTERING ALL THE DIRECTIONS 
* Seven Ways of Centering With CSS 
* How to Center Anything With CSS 
* Vertical Centering With CSS