[关闭]
@EncyKe 2015-09-23T15:30:40.000000Z 字数 7511 阅读 3086

CSS：居中特辑

CSS 前端

一、水平居中

1. 方法一：margin: 0 auto;自动边距

1) 宽度固定已知

  1. <div class="father" style="height:300px;">
  2.     <div class="son" style="width:300px; height:100%; margin:0 auto;">
  3.     </div>
  4. </div>

示例：

(子)：width + margin:0 auto;
优点：兼容性强；简单易懂；
缺点：子元素宽度固定，扩展性、适应性差；

2) 宽度未知，需由文本撑开

  1. <div class="father" style="height:300px;">
  2.     <div class="son" style="width:fit-content; width:-webkit-fit-content; height:100%; margin:0 auto;">
  3.     </div>
  4. </div>

示例：

(子)：(-前缀-)width:fit-content; + margin:0 auto;
优点：子元素宽度不固定，扩展性强；简单易懂；
缺点：兼容性差；
注意：子元素内需有文本才能撑开宽度，且对文本建议使用padding；

2. 方法二：绝对定位

1) 宽度固定已知

  1. <div class="father" style="height:300px;">
  2.     <div class="son" style="width:300px; height:300px; position:absolute; left:50%; margin-left:-150px;">
  3.     </div>
  4. </div>

示例：

(子)：absolute + left:50%; + margin-left:-宽度/2;
优点：兼容性强；
缺点：原理复杂；子元素宽度固定，扩展性差；

2) 宽度未知，结合浮动方法

  1. <div class="grandpa" style="height:300px;">
  2.     <div class="father" style="position:absolute; left:50%;">
  3.         <div class="son" style="height:300px; position:relative; right:50%;">
  4.         </div>
  5.     </div>
  6. </div>

示例：

(父)：absolute + left:50%;
(子)：relative + right:50%;
优点：子元素宽度不固定，扩展性强；兼容性强；
缺点：原理复杂；
注意：结合浮动法，需升格父级；
          插入父元素，设置绝对定位左50%；
          子元素设置相对定位右50%；

3. 方法三：inline-block内联化

  1. <div class="father" style="height:300px; text-align:center;">
  2.     <div class="son" style="width:600px; height:100%; display:inline-block;">
  3.     </div>
  4. </div>

示例：

(父)：text-align:center;
(子)：display:inline-block;
优点：简单易懂；扩展性强；
缺点：inline-block兼容性差；
注意：需额外处理inline-block浏览器差异；

4. 方法四：相对定位 + 浮动

  1. <div class="grandpa" style="height:300px;">
  2.     <div class="father" style="position:relative; left:50%; float:left;">
  3.         <div class="son" style="height:300px; position:relative; right:50%; float:left;">
  4.         </div>
  5.     </div>
  6. </div>

示例：

(父)：relative + left:50%; + float:left;
(子)：relative + right:50%; + float:left;
优点：兼容性强；子元素宽度不固定，扩展性强；
缺点：原理复杂；
注意：原父元素升格为爷级，不作处理；
          插入一个左浮动、相对左50%的父元素；
          子元素左浮动、相对右50%；

5. 方法五：Flex

  1. <div class="father" style="height:300px;">
  2.     <div class="son" style="height:300px;">
  3.     </div>
  4. </div>
  1. .father {
  2.     display: -webkit-box;
  3.     -webkit-box-orient: horizontal;
  4.     -webkit-box-pack: center;
  6.     display: -moz-box;
  7.     -moz-box-orient: horizontal;
  8.     -moz-box-pack: center;
  10.     display: -o-box;
  11.     -o-box-orient: horizontal;
  12.     -o-box-pack: center;
  14.     display: -ms-box;
  15.     -ms-box-orient: horizontal;
  16.     -ms-box-pack: center;
  18.     display: box;
  19.     box-orient: horizontal;
  20.     box-pack: center;
  21. }

示例：

(父)：display:(-前缀-)box; + (-前缀-)box-orient:horizontal;
         + (-前缀-)box-pack:center;
优点：实现便捷；宽度不固定，扩展性强；
缺点：兼容性差；
注意：子元素内需有文本才能撑开宽度，且对文本建议使用padding；；

6. 方法六：绝对定位 + text-align:center;

  1. <div class="father" style="height:300px; text-align:center;">
  2.     &nbsp;
  3.     <div class="son" style="height:300px; width:600px; display:inline-block; position:absolute; margin-left:-300px;">
  4.     </div>
  5. </div>

示例：

 
(父)：text-align:center;
(子)：inline-block + 绝对定位 + margin-left:-宽度/2;
优点：简单易懂；
注意：居中对空格起作用；绝对定位元素则跟随空格；

二、垂直居中

0. 方法零：文本居中

1) 单行文本居中

  1. <div class="father" style="line-height:300px; height:300px;">
  2.     <!-- Content goes here -->
  3. </div>

示例：

(父)：height == line-height

优点：兼容性强；父级无足够空间时不会被截断；
缺点：只适用单行文本(块级无效、多行糟糕)；
注意：段落=子元素；

2) 多行文本居中：全部高度不固定

  1. <div class="father" style="padding:120px;">
  2.     <!-- Content goes here -->
  3.     <!-- Content goes here -->
  4. </div>

示例：

(父)：无height + 上下padding值相同;
优点：兼容性强；子元素高度不固定，扩展性强；
注意：段落=子元素；

3) 多行文本居中：父级高度固定，子级高度不固定

  1. <div class="father" style="width:100%; display:table;">
  2.     <div class="son" style="vertical-align:middle; display:table-cell;">
  3.         <!-- Content goes here -->
  4.         <!-- Content goes here -->
  5.     </div>
  6. </div>

示例：

(父)：width:100%; + height + display:table;
(子)：vertical-align:middle; + display:table-cell;
优点：子元素高度不固定，扩展性强；
缺点：兼容性差 (IE 8-不支持)；
注意：段落∈子元素；

4) 多行文本居中：高度固定 + 兼容IE 6

  1. .grandpa {  
  2.     display:table;   
  3.     border:1px solid #FF0099;   
  4.     background-color:#FFCCFF;   
  5.     width:760px;   
  6.     height:400px;   
  7.     _position:relative;   
  8.     overflow:hidden;   
  9. }   
  10. .father {   
  11.     vertical-align:middle;   
  12.     display:table-cell;   
  13.     _position:absolute;   
  14.     _top:50%;   
  15. }   
  16. .son {   
  17.     _position:relative;   
  18.     _top:-50%;   
  19. }   
  1. <div class="grandpa">
  2.     <div class="father">
  3.         <div class="son">
  4.             <!-- Content goes here -->
  5.         </div>
  6.     </div>
  7. </div>

示例：

无示例。

1. 方法一：表格

原理同方法零中第3)；

  1. <div class="grandpa" style="width:100%; height:300px; display:table;">
  2.     <div class="father" style="vertical-align:middle; display:table-cell;">
  3.         <div class="son">
  4.         </div>
  5.     </div>
  6. </div>
(爷)：width:100%; + height + display:table;
(父)：vertical-align:middle; + display:table-cell;
优点：子元素高度不固定，扩展性强；
缺点：兼容性差 (IE 8-不支持)；
注意：即替换文本为一个div

2. 方法二：绝对定位

  1. <div class="father" style="height:300px;position:relative;">
  2.     <div class="son" style="width:100%; height:150px; position:absolute; top:50%; margin-top:-75px; ">
  3.     </div>
  4. </div>

示例：

(子)：绝对定位 + top:50%; + margin-top:-高度/2; + width:100%;
优点：兼容性强；
缺点：原理复杂；子元素高度固定，扩展性差；宽度按文本填充，不继承；

3. 方法三：外加浮动空元素

  1. <div class="father" style="height:300px;">
  2.     <div class="floater" style="float:left; height:50%; margin-bottom:-90px;"></div><div class="son" style="clear:both; height:180px; position:relative;">
  3.     </div>
  4. </div>

示例：

浮动空元素：左浮动 + height:50%; + margin-bottom:-子元素高度/2
(子)：相对定位 + 清除两侧浮动 + height
优点：兼容性强；
缺点：子元素高度固定；需要额外的空元素；

4. 方法四：绝对定位 + margin:atuo

  1. <div class="father" style="height:300px; position:relative;">
  2.     <div class="son" style="position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:180px;">
  3.     </div>
  4. </div>

示例：

(父)：非默认定位 + height
(子)：绝对定位 + 四边定位:0 + margin:auto + height
优点：简单易用；
缺点：兼容性差 (IE 8-无效)；子元素高度固定，且会被截断；

5. 方法五：CSS 3 transform

  1. <div class="father" style="height:300px;">
  2.     <div class="son" style="position:relative; top:50%; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); transform: translateY(-50%);">
  3.     </div>
  4. </div>

示例：

(子)：相对定位 + top:50%; + (-前缀-)transform: translateY(-50%);
优点：简单易懂；子元素高度不固定；
缺点：兼容性差；

三、完全居中

1. 方法一：绝对定位 + margin

  1. <div class="father" style="height:300px; position:relative;">
  2.     <div class="son" style="width:600px; height:200px; position:absolute; margin-top:-100px; top:50%; margin-left:-300px; left:50%;">
  3.     </div>
  4. </div>

示例：

(父)：非默认定位
(子)：width + height + 绝对定位 + top:50%; + left:50%;
         + margin:-高度/2 0 0 -宽度/2;
优点：简单易懂；兼容性好；
缺点：非响应式；扩展性差，内容溢出；

2. 方法二：相对定位 + transform:translate(-50%,-50%)

  1. <div class="father" style="height:300px;">
  2.     <div class="son" style="width:600px; position:relative; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);">
  3.     </div>
  4. </div>

示例：

(子)：width + 相对定位 + top:50%; + left:50%;
         + (-前缀-)transform:translate(-50%,-50%);
优点：子元素高度不固定，扩展性强；
缺点：兼容性差；

3. 方法三：inline-block化

  1. .father { 
  2.     text-align: center;
  3.     overflow: auto;
  4. }
  6. .father:after,
  7. .son {
  8.     display: inline-block;
  9.     vertical-align: middle;
  10. }
  12. .father:after {
  13.     content: '';
  14.     height: 100%;
  15.     margin-left: -0.25em; 
  16.     /* To offset spacing. May vary by font */
  17. }
  19. .son {
  20.     max-width: 99%; 
  21.     /* Prevents issues with long content causes the content block to be pushed to the top */
  22.     /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
  23. }
  1. <div class="father">
  2.     <div class="son">
  3.         <!-- Content goes here -->
  4.     </div>
  5. </div>

示例：

无示例。

优点：子元素高度不固定；兼容性强；
缺点：结构复杂；margin-left:-0.25em样式需为不同字体大小作调整；

4. 方法四：表格法 + margin: 0 auto;

  1. <div class="grandpa" style="width:100%; height:300px; display:table;">
  2.     <div class="father" style="display:table-cell; vertical-align:middle;">
  3.         <div class="son" style="width:70%; margin: 0 auto;">
  4.         </div>
  5.     </div>
  6. </div>

示例：

(爷)：display:table;
(父)：display:table-cell; + vertical-align:middle;
(子)：width + margin: 0 auto;
优点：兼容性好；子元素高度不固定；
缺点：结构繁琐；

5. 方法五：Flex

  1. .father {
  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. }

示例：

无示例。

优点：宽高任意，扩展性好；
缺点：兼容性差；性能问题；需在<body>上写样式；

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注