小结CSS居中

作为前端初学者，在居中定位上一直是在碰运气，今天抽空总结下自己走的弯路，自我改进，也希望可以给后来的前端朋友有所借鉴。

1.居中类型主要分两种，盒子模型和文档。

   div模型用 margin: 0 auto;

   文档类如 li, p , span...可用 text-align:center;

2.以上虽为主要方法，但在实际中却会遇到一些情况导致方法失效，这点比较烦人，接下来就说说常见问题和自己遇到

  的几种情况。

•   div没有设置width。

•   div设置了浮动float。

•  div设置了定位position。

扫描二维码关注公众号，回复： 3448004 查看本文章

• img要设置display:block;

• 以后遇到持续更新。

3.除了以上方法外，如果知道外部盒子的宽，高，也可以利用计算获得居中效果。

    例：外部高为：h ，宽为 ： w ，

           内部高为：a ，宽为 ： b  ，

          可用定位 top:50% ; margin-top:-a/2 px ;

                         left:50% ; margin-left:-b/2 px ;

学习了一种更简便的居中方式，先外部盒子绝对定位，内部要居中的元素相对定位，然后：

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)

即可，基本适用各种场合~