CSS水平居中/垂直居中的N个方法

我看最近微博流行CSS居中技术，老外码农争相写相关的文章，一篇赛一篇的长啊，我把几篇归纳总结了一下，算是笔记。

孔乙己曾说："茴香豆的回字有四种写法"，万一哪天有个面试官问你："居中一共有几种写法"呢，哈哈，先备着吧~~各种方法各有利弊，大家自己权衡吧，至少在需要居中时多个思路。

<center>

不建议用了。

text-align:center

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

vertical-align:middle

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

line-height

与 height 联手，垂直居中文字

margin:auto

<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 <style>
 2 #ex3_container{
 3 width:200px;
 4 height:200px;
 5 background-color:yellow;
 6 position:relative;
 7 }
 8 #ex3_content{
 9 left:50%; top:50%; 
10 transform:translate(-50%,-50%);
11 -webkit-transform:translate(-50%,-50%);
12 background-color:gray; color:white; position:absolute;
13 }
14 </style>
15 <div id="ex3_container"><div id="ex3_content">Hello World</div></div>

这个技巧相当嚣张，同样适用于没固定大小的内容，DE>min-widthDE>，DE>max-heightDE>，DE>overflow:scrollDE>等。

绝对定位居中

父容器元素：DE>position: relativeDE>

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

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

视口居中

内容元素：DE>position: fixedDE>，DE>z-index: 999DE>，记住父容器元素 DE>position: relativeDE>

1 .Absolute-Center.is-Fixed {
2    50%;
3   height: 50%;
4   overflow: auto;
5   margin: auto;
6   position: fixed;
7   top: 0; left: 0; bottom: 0; right: 0;
8   z-index: 999;
9 }

响应式

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

 1 .Absolute-Center.is-Responsive {
 2    60%;
 3   height: 60%;
 4   min- 400px;
 5   max- 500px;
 6   padding: 40px;
 7   overflow: auto;
 8   margin: auto;
 9   position: absolute;
10   top: 0; left: 0; bottom: 0; right: 0;
11 }

偏移

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

1 .Absolute-Center.is-Right {
2    50%;
3   height: 50%;
4   margin: auto;
5   overflow: auto;
6   position: absolute;
7   top: 0; left: auto; bottom: 0; right: 20px;
8   text-align: right;
9 }

溢出

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

1 .Absolute-Center.is-Overflow {
2    50%;
3   height: 300px;
4   max-height: 100%;
5   margin: auto;
6   overflow: auto;
7   position: absolute;
8   top: 0; left: 0; bottom: 0; right: 0;
9 }

调整尺寸

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

 1 .Absolute-Center.is-Resizable {
 2   min- 20%;
 3   max- 80%;
 4   min-height: 20%;
 5   max-height: 80%;
 6   resize: both;
 7   overflow: auto;
 8   margin: auto;
 9   position: absolute;
10   top: 0; left: 0; bottom: 0; right: 0;
11 }

图像

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

1 .Absolute-Center.is-Image {
2    50%;
3   height: auto;
4   margin: auto;
5   position: absolute;
6   top: 0; left: 0; bottom: 0; right: 0;
7 }

可变高度

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

1 .Absolute-Center.is-Variable {
2   display: table;
3    50%;
4   overflow: auto;
5   margin: auto;
6   position: absolute;
7   top: 0; left: 0; bottom: 0; right: 0;
8 }

负 margin

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

1 .is-Negative {
2  300px;
3 height: 200px;
4 padding: 20px;
5 position: absolute;
6 top: 50%; left: 50%;
7 margin-left: -170px; /* (width + padding)/2 */
8 margin-top: -120px; /* (height + padding)/2 */
9 }

Table-Cell

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

HTML结构：

1 <div class="Pos-Container is-Table">
2   <div class="Table-Cell">
3     <div class="Center-Block">
4     &lt!-- CONTENT -->
5     </div>
6   </div>
7 </div>

CSS样式：

1 .Pos-Container.is-Table { display: table; }
2 .is-Table .Table-Cell {
3   display: table-cell;
4   vertical-align: middle;
5 }
6 .is-Table .Center-Block {
7    50%;
8   margin: 0 auto;
9 }

FlexBox

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

 1 .Pos-Container.is-Flexbox {
 2   display: -webkit-box;
 3   display: -moz-box;
 4   display: -ms-flexbox;
 5   display: -webkit-flex;
 6   display: flex;
 7   -webkit-box-align: center;
 8      -moz-box-align: center;
 9      -ms-flex-align: center;
10   -webkit-align-items: center;
11           align-items: center;
12   -webkit-box-pack: center;
13      -moz-box-pack: center;
14      -ms-flex-pack: center;
15   -webkit-justify-content: center;
16           justify-content: center;
17 }