web前端入門到實戰(zhàn)：css實現(xiàn)豎直居中的N種場景及N種方法

inline 或者 inline-* 的元素豎直居中
可以借助 padding, line-height, vertical-align 等屬性。有如下兩種具體情景：

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比涵江網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式涵江網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋涵江地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

單行豎直居中，如單行文本或者鏈接

這種情況，通過給元素上下添加相同大小的 padding 值即可實現(xiàn)豎直居中。

<div class="container">
    <p>單行文本豎直居中，添加相同的 padding-top & padding-bottom 值</p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 10px;
}

p {
    margin: 0;
    color: #fff;
    /*  相同的上下 padding 值使單行文字居中 */
    padding-top: 100px;
    padding-bottom: 100px;
}
專門建立的學(xué)習(xí)Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

如果不想使用 padding 不方便使用 padding 時，可以通過給元素設(shè)置 line-height，使其等于父容器的高度，從而實現(xiàn)豎直居中。注意，此時記得要考慮父容器的 padding 和 border 帶來的高度變化。

多行豎直居中，如多行文本

和單行文本一樣，給元素上下添加相同大小的 padding 值，還是好用滴~

<div class="container">
    <p>
        多行文本豎直居中，給元素上下添加相同的 padding 值。<br />
        這只是另外一段無關(guān)緊要的，用來測試的廢話。
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 10px;
    padding-right: 10px;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*  給元素上下添加相同大小的padding值 */
    padding-top: 40px;
    padding-bottom: 40px;
}

另外一種方法，是借助 table 的屬性：將父容器設(shè)置成 table，需要豎直居中的元素設(shè)置為 table-cell，然后就可以使用 vertical-align 屬性來居中了。

<div class="container">
    <p>
        多行文本豎直居中，將父容器設(shè)置為 table，需要豎直居中的元素設(shè)置為 table-cell， 然后使用 vertical-align 屬性。
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 20px;
    padding-right: 20px;
    height: 400px;
    /* 父容器設(shè)置成 table*/
    display: table;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /* 需要豎直居中的元素設(shè)置為 table-cell*/
    display: table-cell;
    vertical-align: middle;
}
塊級元素豎直居中
通常借助 絕對定位 和 translate 等手段，在已知或者未知塊級元素高度時，分別使用不同的方法。

1. 塊級元素高度已知

此時可以使用絕對定位的方法，并借助 margin 可以為負值的特性，實現(xiàn)絕對定位居中：

/* 已知元素高度為 100px (也可以是百分比，如 80%)*/
height: 100px;

/* 先使用絕對定位，將元素的上邊界置于豎直的中間*/
position: absolute;  
top: 50%;

/* 再使用margin-top，將元素向上移動自身高度的一半*/
margin-top: -50px;

<div class="container">
    <div class="v-c">
        <p>使用絕對定位使元素豎直居中。</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
    /* 父容器需要設(shè)置position, 使需要豎直居中的元素相對父容器進行絕對定位*/
    position: relative;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    height: 200px;
    /* 使用絕對定位使元素豎直居中*/
    position: absolute;
    top: 50%;
    margin-top: -100px; 
    /* 需要考慮 padding 和 border, 如果沒有設(shè)置 box-sizing: border-box; 的話*/

}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}
專門建立的學(xué)習(xí)Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

表示類似這段代碼的使用頻率簡直不要太高~ 于是在使用 scss 的前提下，自己封裝了一個 mixin，專門用來實現(xiàn)這種定位方式。


// 定義絕對定位實現(xiàn)水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 然后使用的時候直接引用就可以了，這樣可以避免在改動元素寬或高時，還需要同時去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}

塊級元素高度不固定

與上面提到的使用絕對定位居中的方法原理類似，只不過在元素高度不確定的情況下，借助 translateY 使元素向上移動自身高度的一半，進而實現(xiàn)豎直居中。


/* 先將元素的上邊界置于豎直的中間*/
position: relative;  
top: 50%;

/* 再使用 translateY，將元素向上移動自身高度的一半*/
transform: translateY(-50%);


<div class="container">
    <div class="v-c">
        <p>使用 translateY 使元素豎直居中。</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    /* 使用 translateY，使元素豎直居中*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}

目前想到的就這些，應(yīng)該足夠覆蓋大部分的使用情況了~ 以上這些實現(xiàn)方法，當(dāng)然也可以是混合使用的，具體如何，就看應(yīng)用場景啦。

文章標(biāo)題：web前端入門到實戰(zhàn)：css實現(xiàn)豎直居中的N種場景及N種方法
網(wǎng)站路徑：http://bm7419.com/article2/jcehic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站收錄、定制開發(fā)、域名注冊、App設(shè)計、網(wǎng)站制作

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

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