CSS水平居中

水平居中的理解

• text-align:center; 内容对齐方式，不是子元素（标签）对齐方式

    先来看一段简单的代码
    <style type="text/css">
        .fu{
            width: 300px;
            height: 300px;
            background: #f00;
            
        }
        .zi{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    ...
    <div class="fu">
        <div class="zi">子</div>
    </div>
  

分别设置了宽高，显示如下

1.png

现在我们给父div加上text-align:center;

.fu{
        width: 300px;
        height: 300px;
        background: #f00;
        text-align: center;
        font: 20px 微软雅黑;
        color:white;
    }

再来看看发生的变化：

2.png

总结： text-align: center;被子div继承，内容（文字）居中（同时被继承的还有font和color）,这里不等同android中的gravity，android中居中是子元素居中，这里是先被子元素继承，然后再对子元素的内容起作用。

• margin:0 auto;
  给父div设置看看发生的变化

  
  3.png

给子div设置看看发生的变化

4.png

总结：等同于Android中的layout_gravity