技術等級】初級

【承接文章】《CSS文本屬性，讓你的段落更加美觀，前端之路更進一步》

本文重點講解CSS技術中文本樣式的text-align屬性以及”塊級元素”和“內聯元素”的使用。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

一、設置對齊方式：

CSS技術利用text-align屬性來設置對齊方式

首先，在使用該屬性的同時，要明確這是誰相對于誰的對齊方式。讓我們一起來看下列代碼。

<div>

<p style=”text-align:center”></p>

</div>

上述代碼中使用了text-align屬性的標記對是<p></p>標記對。那么，是誰相對于誰垂直居中了呢？下面列舉了兩種可能的情況：

• <p>標記對相對于它的容器<div>標記對垂直居中

• <p>標記對的內容（即“”文字）相對于<p>標記對本身垂直居中。

請大家仔細想一想，應該是上述那種情況？

正確答案是第二種。也就是說：使用了text-align屬性的標記對，是這個標記對的內容在該標記對內部實現了對齊效果，而不是這個標記對在其容器內部實現了對齊效果。

其次，要想實現文本相對于自身的對齊方式，那么自身的標記對必須具備一定的寬度和高度。以上述代碼來說，<p>標記對默認情況下的寬度為整個頁面的寬度，也就是說這個標記對自身是有一定的寬度的，同時內部的文本數量又比較少，所以text-align在使用的過程中是可以看到效果的。

綜合上述的內容，可以說text-align屬性在使用時要注意以下兩點：

• 對齊效果是自身內部的文本內容相對于自身這個容器的對齊方式。

• 標記對自身必須具備一定的寬度。

text-align屬性可以有多種取值：

• left，左對齊。內部文本在自身容器中左對齊

• center，居中對齊。內部文本在自身容器中居中對齊。

• right，右對齊。內部文本在自身容器中右對齊。

• justify，兩端對齊。內部文本在自身容器中兩端對齊，即整個段落的左側是整齊的，右側也是整齊的。這種對齊方式和左對齊是有區別的。左對齊可以明顯的觀察出段落的右側是不整齊的。

左對齊和兩端對齊的區別

從上圖中可以看出，兩端的最右側，也就是深色直線比對的位置。采用的左對齊的段落這條線附近的段落文本是沒有對齊的；而采用了兩端對齊的這條線附近的段落文本是對齊的。

二、塊級元素與內聯元素

我們將HTML的各個標記，根據在頁面中展示內容的外觀，分為兩類：一類叫做“塊級元素”，另一類叫做“內聯元素”。

• 典型的“塊級元素”是<div></div>標記對。

• 典型的“內聯元素”是<span></span>標記對。

這兩個標記對本身沒有任何外觀效果，內部可以盛放任何HTML標記對，是網頁布局時常用的兩個容器。 默認情況下，<div></div>標記的寬度為頁面的整寬，即一個<div></div>標記占一行，被稱為“塊級元素”。<span></span>標記的寬度為內部內容的寬度，多個<span></span>標記的內容可以在一行內顯示，被稱為“行內元素”或“內聯元素”。

還有哪些塊級元素標記：

• 常用的塊級元素標記還包括：<p></p> <ul></ul> <ol></ol> <li></li> <table></table> <form></form>

還有哪些內聯元素標記：

• 常用的內聯元素標記還包括：<a></a> <img /> <input /> <select></select> <textarea></textarea>

三、塊級元素與內聯元素的區別：

塊級元素和內聯元素的的區別可以從下圖中看到。

“塊級元素”和“內聯元素”的區別

四、學習兩個新的CSS屬性

我們這里學習兩個簡單的CSS屬性，分別為width和height屬性。

• width，為塊級元素設置寬度。

• height，為塊級元素設置高度。

這兩個屬性的取值必須是帶有單位的數值。

例：div{width:200px; height:30px;}

上述代碼將頁面中所有的<div></div>標記對都設置為了寬度200像素、高度30像素的矩形。也就是說這樣一來，<div></div>標記對再也不占有整個頁面的整寬了，但是仍然為獨占一行的情況。

這兩個屬性是用來設置元素的寬度和高度的，但是只能適用于塊級元素。這也是內聯元素沒有寬度的一個重要原因：因為利用width屬性為內聯元素設置寬度是沒有效果的。

文章預告

下一篇文章中，小海老師會為大家從細節上深入剖析line-height屬性以及該屬性的用法。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有十篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

之所以整理這類專題的手冊，就是CSS相關的內容實在太碎和零散，同時又夾雜著相關的兼容問題。遇到問題時，我們有時候過度依賴搜索引擎進行求證解決，解決完也沒做認真的歸納和總結。再次遇到此類問題時，我們有可能還不會，這就是我歸納這個手冊的目的，我會把日常工作中經常會用到的高頻CSS相關方法歸納到這個手冊里（有的內容可能來源其它作者），歡迎你持續的訂閱和關注。

今天我們一起來梳理下CSS垂直居中的幾種方法，我們在布局一個頁面時，通常都會用到水平置中和垂直置中，處理水平居中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題，但一直以來最麻煩對齊問題就是「垂直居中」，以下將介紹七種單純利用CSS垂直置中的方式，其實一點也不難(當然跟水平居中比起來難了一點)，只需要理解背后的原理就可以輕松應用。

1、設定行高( line-height )

設定行高是垂直居中最簡單的方式，適用于「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為inline-block屬性的div，若將line-height設成和高度一樣的數值，則內容的行內元素就會被垂直置中，因為是行高，所以會在行內元素的上下都加上行高的1/2，所以就垂直置中了！不過由此就可以看出，為什么必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。CSS范例：外層div0，內容redbox，讓redbox水平垂直置中。

.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;
}

2、添加偽元素( ::before、::after )

剛剛第一種方法，雖然是最簡單的方法(適用于單行標題)，不過就是只能單行，所以我們如果要讓多行的元素也可以垂直居中，就須要使用偽元素的方式。在此之前，先解釋一下CSS里頭vertical-align這個屬性，這個屬性雖然是垂直置中，不過卻是指在元素內的所有元素垂直位置互相置中，并不是相對于外框的高度垂直居中。(下面的CSS會造成這種樣子的垂直居中)

.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;
}

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

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

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

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

3、calc 動態計算

看到這邊或許會有疑問，如果今天我的div必須是block，我該怎么讓它垂直居中呢？這時候就必須用到CSS特有的calc動態計算的能力，我們只要讓要居中的div的top屬性，與上方的距離是「50%的外框高度- 50%的div高度」，就可以做到垂直居中，至于為什么不用margin-top，因為margin抓到的是水平高度，必須要用top才會正確。

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

4、 使用表格或假裝表格

或許有些人會發現，在表格這個HTML里，要實現垂直置中是相當容易的，只需要下一行vertical-align:middle就可以，為什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直置中元素的父元素的display改為table-cell，就可以輕松實現，不過修改display有時候也會造成其他樣式屬性的連動影響，需要小心使用。

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;
}

5、transform

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

.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;
}

6、絕對定位

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

.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;
}

7、使用Flexbox

Flexbox可謂是我們在移動端用的最多的布局方法，因為大部分現代手機瀏覽器都支持這個方法了。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;
}

由于flexbox布局的屬性眾多，如何方便記憶，筆者贈送大家一張圖：

上圖有可能你看不清楚，此圖高清無碼地址，歡迎下載使用：

https://www.qianduandaren.com/demo/images/flex.png

本文內容參考來源

https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

由于源文是繁體，筆者在內容上做了一些調整。

小節

以上就是筆者整理的一些垂直居中的方法，由于垂直居中往往會動用到修改display這個屬性，往往會在排版上造成一些影響，例如不該用flexbox 的地方如果用了flexbox，不該用table 的地方用了table，不該用inline-block 的地方用了inline-block，后續反而要多寫許多其他的定位樣式來進行修正，那就有點本末倒置了，因此如何活用這些CSS 垂直居中的方法，就要依據大家的版面結構進行靈活運用啰！^_^ 如果你有其他本文沒有提及到的垂直居中方法，歡迎到留言區進行分析喲。

更多精彩內容，請關注“前端達人”公眾號