方式一：傳統(tǒng)方式，父容器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;
}

方式二：獨(dú)立使用 absolute 一

<div class="nb">
     &nbsp;<div class="middle"></div>
</div>
 
.nb{
     width:400px;
     height:200px;
     background:#ccc;
     text-align:center;
     overflow:hidden;
}
.middle{
    display:inlineblock;
    *display:inline;*zoom:;
    width:50px;height:50px;
    background:green;
    position:absolute;
    margin-left:-38px;
    margin-top:75px;
}
/*思想:將內(nèi)部元素轉(zhuǎn)化成行內(nèi)元素，再在要居中的元素前加個空格，相當(dāng)一個行內(nèi)元素，
  然后將父元素text-align:center;把行內(nèi)元素居中顯示了
  然后將要居中的元素absolute,由于獨(dú)立使用absolute的跟性特性，它會脫離文檔流，并緊跟在空格的后面
  最后通過調(diào)整margin-left的值進(jìn)行居中
 */

方式三：獨(dú)立使用 absolute 二，也是我比較推崇方式，尤其是在移動端，各種方便，管它是高矮胖搜呢，就是通吃，自從學(xué)會這種方式，媽媽再也不用擔(dān)心我的居中了。

<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:;right:;
    top:;bottom:;
    margin:auto;
} 
 
/*是不是很酷，我已完全不能自拔了*/

總結(jié)

以上是生活随笔為你收集整理的absolute居中的三种实现方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。