HTML代碼如下:

<div id="box"><div id="content"></div> </div>

方法一(最佳兼容,IE7以上都可以):

#box {width: 100px;height: 100px;position: relative;}#content {width: 50px;height: 50px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}

?這里的content的寬高是可以不固定的，關(guān)鍵點(diǎn)是：絕對(duì)定位后上下左右都給0，并且margin:0,效果可以看下面這個(gè)：

演試

方式二(實(shí)現(xiàn)最佳):

#box {width: 100px;height: 100px;position: relative;}#content {position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}

演試

方法三(代碼最簡(jiǎn)單):

#box {width: 200px;height: 200px;display: -webkit-flex;display: flex;justify-content: center;align-items: center;}

演試

轉(zhuǎn)載于:https://www.cnblogs.com/johnjackson/p/10872591.html

總結(jié)

以上是生活随笔為你收集整理的不定宽高的div水平、垂直居中问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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