居中思想可以由很多方式实现,这篇文章采用absolute实现:由传统方式开始到absolute独立使用方式
方式一:传统方式,父容器relateive,子元素absolute,然后left:50%,再margin-left:-width/2
<div class="ago"> <div class="mid"></div> </div> .ago{ width:400px; height:200px; background:#ccc; position:relative; } .mid{ width:50px; height:50px; background:red; position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px; }
方式二:独立使用 absolute 一
<div class="nb"> <div class="middle"></div> </div> .nb{ width:400px; height:200px; background:#ccc; text-align:center; overflow:hidden; } .middle{ display:inlineblock; *display:inline;*zoom:1; width:50px;height:50px; background:green; position:absolute; margin-left:-38px; margin-top:75px; } /*思想:将内部元素转化成行内元素,再在要居中的元素前加个空格,相当一个行内元素, 然后将父元素text-align:center;把行内元素居中显示了 然后将要居中的元素absolute,由于独立使用absolute的跟性特性,它会脱离文档流,并紧跟在空格的后面 最后通过调整margin-left的值进行居中 */
方式三:独立使用 absolute 二,也是我比较推崇方式,尤其是在移动端,各种方便,管它是高矮胖搜呢,就是通吃,自从学会这种方式,妈妈再也不用担心我的居中了。
<div class="db"> <div class="dm"></div> </div> .db{ width:400px; height:200px; background:#ccc; } .dm{ width:50px; height:50px; background:pink; position:absolute; left:0;right:0; top:0;bottom:0; margin:auto; } /*是不是很酷,我已完全不能自拔了*/
时间: 2024-10-10 06:56:42