CSS?不確定寬度的塊級元素怎么水平居中

這篇文章主要介紹了CSS不確定寬度的塊級元素怎么水平居中的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS不確定寬度的塊級元素怎么水平居中文章都會有所收獲，下面我們一起來看看吧。

不確定寬度的塊級元素的水平居中有三種實現方式，下面以分頁為例子，因為分頁的數量是不確定的 ，所以我們不能通過設置寬度來限制他的彈性。

方法一：

<style>
.wrap{background:red;}
ul,li{list-style:none;margin:0;padding:0;}
table{margin-left:auto;margin-right:auto;background:#ccc;}
.test li{float:left;display:inline;margin-right:5px;}
</style>
<div class="wrap">
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                        <li>2</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
</div>

效果如下：

方法一演示了分別有一個，兩個，三個分頁的情況下，分頁模塊都能居中的示例。ul標簽是整個分頁模塊的根元素，它包含的li的數量不確定，所以ul本身的寬度也無法確定，所以不能通過固定寬度設置margin-left和margin-right:auto設置居中，這里用到了一個table來幫助實現不確定寬度的塊級元素的水平居中，table有趣的地方是它本身不是塊級元素，如果不給它設置寬度的話，它本身的寬度是通過內部元素撐起，即使不給它設置寬度，僅設置margin-left:auto, margin-right:auto 來實現居中，間接使ul居中了

方法二：

<style>
ul,li{list-style:none;margin:0;padding:0;}
.wrap{width:500px;height:100px;background:#ccc;}
.test{text-align:center;padding:5px;}
.test li{display:inline;padding-right:10px;}
</style>
<div class="wrap">
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

效果如下：

此方法的思路是改變塊級元素為line類型，然后通過text-align:center來實現居中，比方法一簡單，它的好處是不用添加無語義標簽，簡化了標簽的嵌套深度，但也存在一定的問題：將塊級元素轉化為inline元素，行內元素比塊級元素少一些功能，如設置長寬值，在某些特殊需要的css設置中，可能會帶來一些限制。

方法三：

<style>
ul{list-style:none;margin:0;padding:0;}
.wrap{background:#ccc;width:500px;height:100px;}
.test{clear: both;float:left;padding-top:5px;position:relative;left:50%;}
.test li{position:relative;left:-50%;margin-right:5px;float:left;display:inline;}
</style>
<div class="wrap">
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

效果如下：

方法三的是給父元素設置float，然后父元素設置position:relative和left:50%;  子元素設置position:relative和left:-50%來實現水平居中，這種方法可以保留塊級元素仍以display:block的形式顯示，不會增加無語義標簽。

關于“CSS不確定寬度的塊級元素怎么水平居中”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS不確定寬度的塊級元素怎么水平居中”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。