一、vertical-align

在學(xué)習(xí)vertical-align的時(shí)候，可能會(huì)很困惑。即使網(wǎng)上有一大推文章講veitical-align,感覺看完好像懂了，等自己布局的時(shí)候用到vertical-align的時(shí)候好像對(duì)它又很陌生。這就是我在布局的時(shí)候遇到的問題。

本來vertical-align就很不好理解，網(wǎng)上又有很多大佬把它和line-height放在一起講，我覺得這是造成學(xué)習(xí)這個(gè)屬性困惑的原因之一。其實(shí)我認(rèn)為這兩個(gè)屬性關(guān)系不大。

我希望看這篇文章的時(shí)候都默認(rèn)了解了基本的知識(shí)點(diǎn)，比如行高是什么，vertical-align的官方定義，line box（行盒），inline-level 的基線，inline-level 默認(rèn)基線對(duì)齊。如果對(duì)這些還不明白可以去MDN上，或者我推薦的這篇文章css vertical-align你真的很了解嘛？ 仔細(xì)看看，因?yàn)檫@里沒有介紹基本含義，只是記錄我當(dāng)時(shí)踩的坑。

我知道 vertical-align默認(rèn)是基線對(duì)齊，也明白一個(gè)img底下為啥會(huì)多出來空白內(nèi)容，而我們修改了vertical-align屬性值，空白就會(huì)消失。

我疑惑的點(diǎn)是，我們對(duì)inline-level設(shè)置的vertical-align到底是和父元素的什么對(duì)齊，當(dāng)時(shí)我有以下幾點(diǎn)想法，但都證明是錯(cuò)誤的。

1、inline-level設(shè)置的vertical-align始終和父元素的baseline對(duì)齊；

例如：inline-level設(shè)置了vertical-align:top;那結(jié)果應(yīng)該是inline-level的top去和父元素的baseline對(duì)齊，經(jīng)驗(yàn)證并不對(duì)

2、inline-level設(shè)置的vertical-align始終和父元素對(duì)應(yīng)的子元素的vertical-align去對(duì)齊

例如：inine-level設(shè)置了vertical-align:top;那結(jié)果應(yīng)該是inline-level的top和父元素的top對(duì)齊，經(jīng)驗(yàn)證也不對(duì)。

3、元素的對(duì)齊方式始終是基線對(duì)齊，inline-level設(shè)置的vertical-align行盒相對(duì)自己來說行盒的基線就是自己設(shè)置的vertical-align的值
例如：inline-level設(shè)置了vertical-align:top;行盒的基線就變成了top，然和在將inline-level和行盒的top對(duì)齊，毋庸置疑這也是錯(cuò)誤的。

我也不知道我在學(xué)習(xí)vertical-align怎么會(huì)有這么多錯(cuò)誤的想法，之所以記錄下來，是想讓自己知道學(xué)習(xí)知識(shí)點(diǎn)不要過多的想當(dāng)然，要仔細(xì)去看看官方到底是怎么定義的。

之所以會(huì)有這么多錯(cuò)誤的想法，是因?yàn)関ertical-align的每個(gè)值的含義區(qū)別很大,真正理解每個(gè)值的含義，那就能明白vertical-align的各種現(xiàn)象了。

重點(diǎn)來了

看W3C對(duì)vertical-align給出的定義：

官方文檔的翻譯：vertical-align會(huì)影響行內(nèi)級(jí)塊元素在一個(gè)行盒中垂直方向的位置。

我把那篇文章有兩句重點(diǎn)的地方粘過來了

一定要仔細(xì)去看vertical-align每個(gè)值的含義

baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent’s baseline.
將框的基線與父框的基線對(duì)齊。 如果框沒有基線，則將底部邊距邊緣與父級(jí)的基線對(duì)齊。

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
將框的垂直中點(diǎn)與父框的基線加上父框 x 高度的一半對(duì)齊。

sub
Lower the baseline of the box to the proper position for subscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)
將框的基線降低到父框下標(biāo)的適當(dāng)位置。 （此值對(duì)元素文本的字體大小沒有影響。）

看這個(gè)例子

.box{width: 300px;height: 200px;text-align: center;background-color: orange;}.box img{width: 60px;vertical-align: sub;}<div class="box"><img src="./imgs/165.png" alt=""><sub>sub text</sub>xxx</div>

super
Raise the baseline of the box to the proper position for superscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)
將框的基線提高到父框上標(biāo)的正確位置。 （此值對(duì)元素文本的字體大小沒有影響。）

  <style>.box{width: 300px;height: 200px;text-align: center;background-color: orange;}.box img{width: 60px;vertical-align: sub;}</style><div class="box"><img src="./imgs/165.png" alt=""><sup>super text</sup>xxx</div>

text-top
Align the top of the box with the top of the parent’s content area
將框的頂部與父內(nèi)容區(qū)域的頂部對(duì)齊

text-bottom
Align the bottom of the box with the bottom of the parent’s content area
將框的底部與父內(nèi)容區(qū)域的底部對(duì)齊

<percentage>
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the ‘line-height’ value). The value ‘0%’ means the same as ‘baseline’.
百分比的值是相對(duì)該元素的line-height數(shù)值的（元素有默認(rèn)行高的），具體的升高/降低數(shù)值由由該元素的line-height的值乘以百分比計(jì)算得出。相對(duì)自己baseline，升高或較低該元素一定距離。

<length>
Raise (positive value) or lower (negative value) the box by this distance. The value ‘0cm’ means the same as ‘baseline’.
該值為一定的像素?cái)?shù)值，與vertical-align:percentage效果類似，除了移動(dòng)的距離是被計(jì)算出來的。

vertical-algin和line-height真的像網(wǎng)上說的關(guān)系不可分割嗎

我倒是覺的其實(shí)完全沒必要每次將這兩個(gè)一起介紹，因?yàn)樗鼈z的關(guān)系沒有那么深，一起說反而會(huì)讓初學(xué)者搞蒙。

我們知道line-height是設(shè)置一行文本的高度，其實(shí)就是一個(gè)行盒的高度。

vertical-align和line-height有關(guān)聯(lián)的地方就是如果父元素設(shè)置行高等于它的height，那么就是這個(gè)行盒的高度就是父元素的高度，img又設(shè)置了vertical-align:middle;所以img的中垂線和父元素的baseline+x-height的一半（字母x高度的一半）位置對(duì)齊，就是如圖經(jīng)典的一幕。

	<style>.box{padding-left: 20px;line-height: 100px;border: 1px solid gray;}.box img{width: 60px;vertical-align: middle;}</style><div class="box"><img src="./images/slin.jpg" alt=""><span>x</span>x</div>

所以vertical-align也沒有那么難吧，它和line-height也并不像網(wǎng)上說所謂的基友關(guān)系。

現(xiàn)在我們來看為什么會(huì)說像上面的設(shè)置圖片只是相似垂直居中，實(shí)際上并沒有真正左到居中

我們?nèi)绻靼琢诵懈呔椭浪鼤?huì)對(duì)行距做一個(gè)等分，那么文字就會(huì)是垂直居中的。但是x交叉點(diǎn)（x一半的位置）沒有在文本中線這個(gè)位置，中線是在x一半偏上一點(diǎn)點(diǎn)的位置，即和文本x一半對(duì)齊的img也就在中線偏下一點(diǎn)點(diǎn)的位置。（我們這里說的文本的中線不是圖里這個(gè)藍(lán)色線middle，而是整行文本的中垂線）

二、水平居中方法總結(jié)

1、行內(nèi)級(jí)元素

設(shè)置父元素的text-align:center

2、塊級(jí)元素

設(shè)置當(dāng)前塊級(jí)元素margin： 0 aut0;（此塊級(jí)元素是有寬度的，塊級(jí)元素沒有設(shè)置寬度就獨(dú)占一行了）

3、絕對(duì)定位

元素有寬度情況下，left:0/right:0/mafrgin:0 auto;

4、left + translate

此方法和垂直居中方法原理一樣，元素設(shè)置相對(duì)定位，不用脫標(biāo)(元素如果本身有需要設(shè)置了絕對(duì)定位也是這個(gè)效果)；且只需要做兩件事

1. 讓元素向下位移父元素的50%
2. 讓元素向上位移自身的50%

 <style>.box{height: 200px;background-color: orange;}.child{position: relative;width: 60px;height: 60px;background: darkred;left: 50%;transform: translateX(-50%);}</style><div class="box"><div class="child"></div>
</div>

5、flex

justify-content:center

三、垂直居中方法總結(jié)

1、絕對(duì)定位

元素有高度情況下，top:0/ bottom:0/margin:auto 0;

2、flex布局

弊端：

1. 當(dāng)前flex布局中所有的元素都會(huì)被垂直居中
2. 相對(duì)來說，兼容性差一點(diǎn)點(diǎn)（基本可以忽略）

3、top + translate

<style>.box{height: 200px;background-color: orange;}.child{position: relative;width: 60px;height: 60px;background: darkred;top: 50%;transform: translateY(-50%);}</style><div class="box"><div class="child"></div></div>

四、理解auto的含義

五、BFC是什么

css最難懂部分就是屬性值auto的理解、vertical-align和line-height的關(guān)系以及BFC是什么

水平居中的方法和垂直居中整理