最近有2個同學都問到了一個類似的問題：就是不確定寬度的div如何只用css實現水平居中。所以就選擇這個問題來寫一下解決方法！

很多時候我們在布局的時候無法確定div的寬度，所以無法用 margin:0 auto;來實現水平居中，那么問題來了：不確定寬度的div，如何用css水平居中？

html代碼如下：

<div class="pages">

<span>首頁</span>

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>尾頁</span>

</div>

假設分頁數目不確定，可能是2頁，也有可能是5頁等！

css代碼如下：

.pages{ float: left; position: relative; left: 50% }

.pages span{ float: left; position: relative; left: -50%}

對父元素設置float：left，相對定位position：relative；left：50%；子元素float：left，相對定位position：relative；不過left：-50%

demo圖：

代碼很簡單，原理也不難理解，輕松實現不確定寬度的div水平居中！

總結

以上是生活随笔為你收集整理的css如何让不确定宽度的div水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

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