方案一 位置 屬性名 值 意義 父div text-align center 讓子元素居中 子div display inline-block 可以將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。inline-block的寬度是其中文字的寬度。 子div text-align left 讓子元素... ...
方案一
| 位置 | 屬性名 | 值 | 意義 |
| 父div | text-align | center | 讓子元素居中 |
| 子div | display | inline-block | 可以將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。inline-block的寬度是其中文字的寬度。 |
| 子div | text-align | left | 讓子元素中的文字不繼承父div 的 text-align:center屬性, 設置為預設的text-align:left |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平居中--方案一</title> <style type="text/css"> /*優點：相容IE低版本瀏覽器*/ .parent{ text-align: center; } .child{display: inline-block; text-align: left;} </style> </head> <body> <div class="parent" style="width: 400px;height: 100px;background: red;"> <div class="child" style="width: 80px;height: 100px;background: green;"> <h1>DEMO</h1> </div> </div> </body> </html>
方案二
| 位置 | 屬性名 | 值 | 意義 | 相容性 |
| 子div | display | table | table的表現上和block非常像，但是它和block元素有區別，『寬度也是跟著內容走』 | IE8以上 |
| 子div | margin | 0 auto | 上下為0 左右為『自動』 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平居中table_margin</title> <style type="text/css"> .child{display: table; margin: 0 auto; } </style> </head> <body> <div class="parent" style="width: 400px;height: 100px;background: red;"> <div class="child" style="height: 100px;background: green;text-align: center">DEMO</div> </div> </body> </html>
方案三---絕對定位+transform
| 位置 | 屬性名 | 值 | 意義 | 相容性 |
| 父div | position | relative | 相對定位，將父元素設置為一個參照物 | |
| 子div | position | absolute | 絕對定位，寬度由內容決定 | |
| 子div | left | 50% | 把子div的左邊緣設置在其父元素左邊緣向右 父元素50%寬度的位置： | |
| 子div | transform | 0 auto | 上下為0 左右為『自動』 | css3新增，IE老版本不支持 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平居中absolute_transform</title> <style type="text/css"> .parent{ position: relative; } .child{ position: absolute; /* absolute元素預設沒有寬度，寬度由內容決定*/ left: 50%; /*以父元素為參照物,向左移動父類元素寬度的50%*/ transform: translateX(-50%); /*css3新增 以自身的寬度的50%向左邊移動 */ } </style> </head> <body> <div class="parent" style="width: 400px;height: 100px;background: #403f42;"> <div class="child" style="width: 200px;height: 100px;background: red;color: white;"> DEMO </div> </div> </body> </html>
缺點： transform 屬性為css3新增，IE老版本(IE6,7,8)中無法使用。
方案四
| 位置 | 屬性名 | 值 | 意義 | 相容性 |
| 父div | display | flex | 父元素的display 為 flex時，子元素自然就成為了flex item。flex 預設情況下，寬度是auto的。 | |
| 父div | justify-content | center |
項目位於容器的中心。 |
|
| 或者 | ||||
| 子div | margin | 0 auto |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平居中flex_justify-content</title> <style type="text/css"> .parent{ display: flex; /* 當父類元素是display為flex時，其中的子元素就會變為 flex item，子元素的寬度就為文字的實際寬度 */ justify-content: center; } </style> </head> <body> <div class="parent" style="width: 400px;height: 100px;background: #403f42;"> <div class="child" style="height: 100px;background: red;color: white;"> DEMO </div> </div> </body> </html>
或者，在子元素中設置 margin 屬性：上下為0 ，左右自動（居中）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平居中flex_justify-content</title> <style type="text/css"> .parent{ display: flex; /* 當父類元素是display為flex時，其中的子元素就會變為 flex item，子元素的寬度就為文字的實際寬度 */ } .child{ margin: 0 auto; } </style> </head> <body> <div class="parent" style="width: 400px;height: 100px;background: #403f42;"> <div class="child" style="height: 100px;background: red;color: white;"> DEMO </div> </div> </body> </html>
效果相同
缺點： flex 在IE低版本中不支持。
