方案一
| 位置 | 属性名 | 值 | 意义 |
| 父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低版本中不支持。
开始做，坚持做，重复做
