css寬高不固定實(shí)現(xiàn)居中的方法-創(chuàng)新互聯(lián)

這篇文章主要介紹了css寬高不固定實(shí)現(xiàn)居中的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有靈武免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

css寬高不固定實(shí)現(xiàn)居中的方法：1、利用flex進(jìn)行布局實(shí)現(xiàn)居中；2、使用css3中transform進(jìn)行元素偏移；3、利用table-cell實(shí)現(xiàn)居中即可。

css寬高不固定如何實(shí)現(xiàn)居中？

方法1：利用flex進(jìn)行布局

大家的第一反應(yīng)，可能就是 flex 了。因?yàn)樗膶?xiě)法夠簡(jiǎn)單直觀，兼容性也沒(méi)什么問(wèn)題。是手機(jī)端居中方式的選。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

利用到了 2 個(gè)關(guān)鍵屬性：justify-content 和 align-items，都設(shè)置為 center，即可實(shí)現(xiàn)居中。

需要注意的是，一定要把這里的 flex-center 掛在父級(jí)元素，才能使得其中的子元素居中。

方法2：使用position+transform

主要使用了css3中transform進(jìn)行元素偏移，效果非常好

這方法功能很強(qiáng)大，也比較靈活，不僅僅局限在實(shí)現(xiàn)居中顯示。兼容方面也一樣拿IE來(lái)做比較，第二種方法IE8以上都能使用。 IE8及IE8以下都會(huì)出現(xiàn)問(wèn)題。

<body>
    <div id="box">
        <div id="content">div被其中的內(nèi)容撐起寬高</div>
    </div>        
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;  
transform:translateX(-50%) translateY(-50%); 
-webkit-transform:translateX(-50%) translateY(-50%); }

方法3：利用table-cell

利用 table 的單元格居中效果展示。與 flex 一樣，需要寫(xiě)在父級(jí)元素上。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css寬高不固定實(shí)現(xiàn)居中的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

文章題目：css寬高不固定實(shí)現(xiàn)居中的方法-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article44/dgopee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站制作、定制開(kāi)發(fā)、網(wǎng)站建設(shè)、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容