CSS水平居中

水平居中的理解

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

    先来看一段简单的代码
    
    ...
    
  
        
  子
    
  

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

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