作为前端初学者,在居中定位上一直是在碰运气,今天抽空总结下自己走的弯路,自我改进,也希望可以给后来的前端朋友有所借鉴。
1.居中类型主要分两种,盒子模型和文档。
div模型用 margin: 0 auto;
文档类如 li, p , span...可用 text-align:center;
2.以上虽为主要方法,但在实际中却会遇到一些情况导致方法失效,这点比较烦人,接下来就说说常见问题和自己遇到
的几种情况。
- div没有设置width。
- div设置了浮动float。
- div设置了定位position。
- 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%)
即可,基本适用各种场合~