在前端设计的工作中,很多时候需要设计人员使用position:absolute进行定位元素,但元素一旦定位后,想要水平或垂直居中就格外复杂,因此许多设计人员会想办法避免使用position属性,但逃避并不是办法,既然遇到困难,就要想方法进行解决,通过查找和测试分享给大家三种有效的position定位后垂直水平居中的方法。
一、经典办法,大容器使用position:relateive属性,子元素使用position:absolute定位属性,之后规定元素的左侧距离50%,并将元素的长宽数值/2使用margin进行设置,代码如下:
<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;
}
/*是不是很酷,我已完全不能自拔了*/
未经允许不得转载:西德SEO » 三种有效的position定位后垂直水平居中的方法