元素水平居中方式

1 对于行内元素来说，直接可以通过设置父元素的　　text-align:center;　

1 正确：
2 <div style="text-align:center;">
3     <img/>
4 </div>
5 
6 错误:
7 <a href=""><img/></a>

2 块级元素设置 margin:0 auto 必须设置块级元素宽度才能实现元素居中

.inner-box{
  width:200px;
  border:1px solid red;
  margin:0 auto;
}

<div class="box">
    <div class="inner-box">234567</div>
</div>

3 使用定位属性 position:absolute;

.box{    
　　position:relative;
}
.inner-box{
    position:absolute; 
　　 width:100px;
    left:50%;
    margin:0 -50px;
}


<div class="box">
    <div class="inner-box">234567</div>
</div>

 

转载于:https://www.cnblogs.com/czhyuwj/p/5392390.html