這篇文章運(yùn)用簡單易懂的例子給大家介紹css垂直居中元素的方法，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

站在用戶的角度思考問題，與客戶深入溝通，找到犍為網(wǎng)站設(shè)計(jì)與犍為網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋犍為地區(qū)。

垂直居中

1.單行內(nèi)聯(lián)元素垂直居中

<div id="box">
     <span>單行內(nèi)聯(lián)元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2.多行內(nèi)聯(lián)元素垂直居中

①利用flex布局（flex）

利用flex布局實(shí)現(xiàn)垂直居中，其中flex-direction: column定義主軸方向?yàn)榭v向。這種方式在較老的瀏覽器存在兼容性問題。

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②利用表布局（table）

利用表布局的vertical-align: middle可以實(shí)現(xiàn)子元素的垂直居中

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 塊級(jí)元素垂直居中

①使用absolute+負(fù)margin(已知高度寬度)

通過絕對(duì)定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，就可以實(shí)現(xiàn)了。

<div class="parent">
    <div class="child">固定高度的塊級(jí)元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②使用absolute+transform

當(dāng)垂直居中的元素的高度和寬度未知時(shí)，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問題。

<div class="parent">
    <div class="child">未知高度的塊級(jí)元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③使用flex+align-items

通過設(shè)置flex布局中的屬性align-items，使子元素垂直居中。

<div class="parent">
    <div class="child">未知高度的塊級(jí)元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④使用table-cell+vertical-align

通過將父元素轉(zhuǎn)化為一個(gè)表格單元格顯示（類似 <td> 和 <th>），再通過設(shè)置 vertical-align屬性，使表格單元格內(nèi)容垂直居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

關(guān)于css垂直居中元素的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：css垂直居中元素的方法
本文網(wǎng)址：http://www.rwnh.cn/article34/jipipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、企業(yè)建站、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、電子商務(wù)

廣告

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