水平居中的理解
-
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
