三种有效的position定位后垂直水平居中的方法

在前端设计的工作中，很多时候需要设计人员使用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定位后垂直水平居中的方法