這篇文章主要講解了“css水平居中的子元素是固定寬度還是寬度未知”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css水平居中的子元素是固定寬度還是寬度未知”吧！

網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見的多，溝通容易、能幫助客戶提出的運(yùn)營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價(jià)值服務(wù)。

水平居中還是比較容易的，先看子元素是固定寬度還是寬度未知。

1、固定寬度這種方式是絕對(duì)定位居中，除了使用margin，還可以使用transform。

（注意瀏覽器兼容性，只適用于 ie9+，移動(dòng)開發(fā)請(qǐng)忽略）

        .container{
            width: 300px;
            height: 200px;
            background: pink;
            position: relative;
        }
        .inner{
            width: 100px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -50px;
            background: #fff;
            text-align: center;
        }

2、寬度未知將子元素設(shè)置為行內(nèi)元素，然后父元素設(shè)置text-align: center。

       .container{
            width: 300px;
            height: 200px;
            background: pink;
            position: relative;
            text-align: center;
        }
        .inner{
            display: inline-block;
 
        }

感謝各位的閱讀，以上就是“css水平居中的子元素是固定寬度還是寬度未知”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)css水平居中的子元素是固定寬度還是寬度未知這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！