CSS實(shí)現(xiàn)垂直居中的方法示例-創(chuàng)新互聯(lián)

這篇文章主要介紹了CSS實(shí)現(xiàn)垂直居中的方法示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問題，與客戶深入溝通，找到呼蘭網(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)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋呼蘭地區(qū)。

七種垂直居中的方法

1. 設(shè)定行高（line-height）

2. 添加偽元素

3. calc動(dòng)態(tài)計(jì)算

4. 使用表格或假裝表格

5. transform

6. 絕對(duì)定位

7. 使用Flexbox

設(shè)定行高（line-height）

設(shè)定行高是垂直居中最簡(jiǎn)單的方式，適用于“單行”的“行內(nèi)元素”（inline、inline-block），例如單行的標(biāo)題，或是已經(jīng)設(shè)為inline-block屬性的div，若將line-height設(shè)成和高度一樣的數(shù)值，則內(nèi)容的行內(nèi)元素就會(huì)被垂直居中，因?yàn)槭切懈撸詴?huì)在行內(nèi)元素的上下都加上行高的1/2，所以就垂直居中了！不過由此就可以看出，為什么必須要單行的行內(nèi)元素，因?yàn)槿绻嘈?，第二行與第一行的間距會(huì)變超大，就不是我們所期望的效果了。CSS示例：

.div0
{  
width:200px;  
height:150px;  
border:1px solid #000;  
line-height:150px;  
text-align:center;
}
.redbox
{  
display:inline-block; 
 width:30px; 
 height:30px; 
 background:#c00;}

添加偽元素（::before、::after）

剛剛第一種方法，雖然是最簡(jiǎn)單的方法（適用于單行標(biāo)題），不過就是只能單行，所以我們?nèi)绻尪嘈械脑匾部梢源怪本又校捅仨氁褂脗卧氐姆绞?。在此之前，先解釋一下CSS里頭vertical-align這個(gè)屬性，這個(gè)屬性雖然是垂直居中，不過卻是指在元素內(nèi)的所有元素垂直位置互相居中，并不是相對(duì)于外框的高度垂直居中。（下面的CSS會(huì)造成這種樣子的垂直居中）

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
  text-align:center;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  display:inline-block;
  vertical-align:middle;
}
.greenbox{
  width:30px;
  height:60px;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}
.bluebox{
  width:30px;
  height:40px;
  background:#00f;
  display:inline-block;
  vertical-align:middle;
}

因此，如果有一個(gè)方塊變成了高度100%，那么其他的方塊就會(huì)真正的垂直居中。

.greenbox{
  width:30px;
  height:100%;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}

但是我們總不能每次要垂直居中，都要添加一個(gè)奇怪的div在里頭吧！所以我們就要把腦筋動(dòng)到“偽元素”身上，利用::before和::after添加div進(jìn)到杠杠內(nèi)，讓這個(gè)“偽”div的高度100%，就可以輕松地讓其他的div都居中。不過不過不過！div記得要把display設(shè)為inline-block，畢竟vertical-align:middle；是針對(duì)行內(nèi)元素，div本身是block，所以必須要做更改！

.div0::before{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background:#f00;
}

calc動(dòng)態(tài)計(jì)算

看到這邊或許會(huì)有疑問，如果今天我的div必須要是block，我該怎么讓它垂直居中呢？這時(shí)候就必須用到CSS特有的calc動(dòng)態(tài)計(jì)算的能力，我們只要讓要居中的div的top屬性，與上方的距離是“50%的外框高度+ 50%的div高度”，就可以做到垂直居中，至于為什么不用margin-top，因?yàn)閙argin相對(duì)的是水平寬度，必須要用top才會(huì)正確。

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  float:left;
  top:calc(50% - 15px);
  margin-left:calc(50% - 45px);
}
.greenbox{
  width:30px;
  height:80px;
  background:#0c0;
  float:left;
  top:calc(50% - 40px);
}
.bluebox{
  width:30px;
  height:40px;
  background:#00f;
  float:left;
  top:calc(50% - 20px);
}

使用表格或假裝表格

或許有些人會(huì)發(fā)現(xiàn)，在表格這個(gè)HTML里面常用的DOM里頭，要實(shí)現(xiàn)垂直居中是相當(dāng)容易的，只需要下一行vertical-align:middle就可以，為什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直居中元素的父元素的display改為table-cell，就可以輕松達(dá)成，不過修改display有時(shí)候也會(huì)造成其他樣式屬性的連動(dòng)影響，需要比較小心使用。

HTML：

<table>
    <tr>
        <td>
            <div>表格垂直居中</div>
        </td>
    </tr>
</table>
<div class="like-table">
    <div>假的表格垂直居中</div>
</div>

CSS：

.like-table{
    display:table-cell;
}
td,
.like-table{
    width:150px;
    height:100px;
    border:1px solid #000;
    vertical-align: middle;
}
td div,
.like-table div{
    width:100px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:12px;
    line-height: 50px;
    text-align: center;
    background:#c00;
}
.like-table div{
    background:#069;
}

transform

transform是CSS3的新屬性，主要掌管元素的變形、旋轉(zhuǎn)和位移，利用transform里頭的translateY（改變垂直的位移，如果使用百分比為單位，則是以元素本身的長(zhǎng)寬為基準(zhǔn)），搭配元素本身的top屬性，就可以做出垂直居中的效果，比較需要注意的地方是，子元素必須要加上position:relative，不然就會(huì)沒有效果喔。

.use-transform{
    width:200px;
    height:200px;
    border:1px solid #000;
}
.use-transform div{
    position: relative;
    width:100px;
    height:50px;
    top:50%;
    transform:translateY(-50%);
    background:#095;
}

絕對(duì)定位

絕對(duì)定位就是CSS里頭的position:absolute，利用絕對(duì)位置來(lái)指定，但垂直居中的做法又和我們正統(tǒng)的絕對(duì)位置不太相同，是要將上下左右的數(shù)值都設(shè)為0，再搭配一個(gè)margin:auto，就可以辦到垂直居中，不過要特別注意的是，設(shè)定絕對(duì)定位的子元素，其父元素的position必須要指定為relative喔！而且絕對(duì)定位的元素是會(huì)互相覆蓋的，所以如果內(nèi)容元素較多，可能就會(huì)有些問題。

.use-absolute{
    position: relative;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-absolute div{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#f60;
}

使用Flexbox

使用align-items或align-content的屬性，輕輕松松就可以做到垂直居中的效果。

.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-flexbox div{
    width:100px;
    height:50px;
    background:#099;
}

以上就是一些垂直居中的方法，由于垂直居中往往會(huì)動(dòng)用到修改display這個(gè)屬性，往往也會(huì)在排版上造成一些影響，例如不該用flexbox的地方如果用了flexbox，不該用table的地方用了table，不該用inline-block的地方用了inline-block，后續(xù)反而要多寫許多其他的定位樣式來(lái)修正，那就有點(diǎn)本末倒置了，因此如何活用這些CSS垂直居中的方法，就要看大家的版面結(jié)構(gòu)而靈活運(yùn)用啰！

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS實(shí)現(xiàn)垂直居中的方法示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前題目：CSS實(shí)現(xiàn)垂直居中的方法示例-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://muchs.cn/article18/dppjdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、企業(yè)建站、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、定制網(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)