接触前端的小伙伴们,相信大家对盒子水平居中再熟悉不过了,盒子水平居中的两个缺一不可的条件为:宽度和margin:0 auto;
然而进一步推想盒子水平垂直居中怎么实现呢,同样我们可以借助定位以及top:50%和left:50%加margin-left和margin-right的值设置为宽度的一般加负号。
两者都ok了,那么我们再来想一下如果一个盒子不确定宽度怎么实现让它水平居中呢?
具体可见如下代码:
想学习更多案例效果的小伙伴可以加我Q群:142991222,一起探索更多前端干货。
如此一来,一个简单的需求就实现了,同时大家也掌握了三种居中的情况,这些情况也是我们平时项目中经常用到的,希望对大家有所帮助。
网友评论