方案一
| 位置 | 属性名 | 值 | 意义 |
| 父div | text-align | center | 让子元素居中 |
| 子div | display | 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>
方案二
| 位置 | 属性名 | 值 | 意义 |
原文：http://www.cnblogs.com/qq-757617012/p/6008900.html