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的寬高是可以不固定的，關鍵點是：絕對定位后上下左右都給0，并且margin:0,效果可以看下面這個：

演試

方式二(實現最佳):

#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%);}

演試

方法三(代碼最簡單):

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

演試

轉載于:https://www.cnblogs.com/johnjackson/p/10872591.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。