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

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;
  5. display: -moz-box;
  6. -moz-box-orient: horizontal;
  7. -moz-box-pack: center;
  8. display: -o-box;
  9. -o-box-orient: horizontal;
  10. -o-box-pack: center;
  11. display: -ms-box;
  12. -ms-box-orient: horizontal;
  13. -ms-box-pack: center;
  14. display: box;
  15. box-orient: horizontal;
  16. box-pack: center;
  17. }

示例:

(父):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. }
  5. .father:after,
  6. .son {
  7. display: inline-block;
  8. vertical-align: middle;
  9. }
  10. .father:after {
  11. content: '';
  12. height: 100%;
  13. margin-left: -0.25em;
  14. /* To offset spacing. May vary by font */
  15. }
  16. .son {
  17. max-width: 99%;
  18. /* Prevents issues with long content causes the content block to be pushed to the top */
  19. /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
  20. }
  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>上写样式;


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