IFE-Task-04:定位和居中問題_html/css

理論知識

定位元素上篇文章講過，這里再相互比較。

 | static | relative | absolute | fixed | | ------| ------ | ------ | ------ | | 普通流 | 普通流 | 脫離普通流 | 脫離普通流 | | 無法設置位移 | 可以設置位移 | 可以設置位移 | 可以設置位移 | | 正常位置 | 定位相對于初始位置 | 定位于非static的祖先元素 | 定位相對于瀏覽器窗口 |

居中

居中問題詳解 介紹的很清楚。塊級元素和行內元素的居中方法有所不同。

1. 水平居中

   塊級元素能夠通過設置元素內文本水平居中（{ text-align: center; }），可以將元素內部的行內元素居中。而塊級元素自己則通過margin-left、margin-right設置為auto。這是有 原因（原文） 的，（在W3C模型中）在水平方向上，包含元素的父元素（元素包含塊）的寬度（width）由：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right7個屬性確定。屬性值默認為0，或者特定值。而width、margin-left、margin-right還可以設置為auto：

2. 三者之中有一個設置為auto，則該屬性的寬度為父元素的寬度減去其他兩個屬性的值。
3. 如果width固定，margin: auto，則兩個margin平分剩下的寬度。
4. 如果三個屬性都設置auto，而margin設置為0，而width寬度為盡可能的寬。

所以我們可以通過設置左右外邊距來水平居中block元素，{ margin: 0 auto; }。但是這個方法無法滿足多個block(inline-block)在一行中水平居中。但是我們可以使用flex布局來將多個block元素在一行中水平居中。使用樣式{ display: flex; justify-content: center; } 即可讓flex布局的元素水平居中。

5. 垂直居中

   行內元素不能設置左右內邊距、外邊距，但是可以設置padding-top、padding-bottom兩個屬性相等來垂直居中。當多行元素在寬度較小的屏幕上重疊時，就需要設置line-height和white-space，{ line-height: 需要的高度; white-space: nowrap: } 來垂直居中。如果元素為table cell，使用vertical-align = middle。當然也使用flex布局，在 flex容器上設置 flex-direction: column (注意容器需要設置固定高度)，即可垂直布局。

   塊級元素有分為是否確定高度。如果確定高度，則在relative父元素內的absolute子元素中設置位移top為50%，margin-top則為高度的一半的負值。并且依據盒子模型，還有需要考慮padding和border的大小。而不確定高度的情況，就需要使用translateY來講元素居中，{ top: 50%; transform: translateY(-50%); }。最后flex布局也是要給萬金油方法，{ display: flex; flex-direction: column; justify-content: center; }。這個屬性的設置還可以保持水平居中。

6. 水平垂直居中

   結合上述兩個方面的方法，可以總結水平垂直居中的方法也有三種。

7. 知道寬高: 使用考慮容器寬高大小，將margin-top和marging-left設置原有寬高的一半，再通過位移移動到中間位置。{ margin: -{ 容器 / 2 } px 0 0 -{ 容器 / 2 }px; top: 50%; left: 50%; }，這里只考慮了W3c模型，IE模型還需將border大小考慮進來。
8. 不知道寬高: 設置樣式 { top: 50%; left: 50%; transform: translate(-50%, -50%); } 即可。
9. 萬金油flex: 設置樣式 { display: flex; flex-direction: column; justify-content: center; } 即可。

實踐

題目要求水平垂直方向都居中并且知道寬高，我就使用了第一種方法。而只有在absolute定位下才能使用百分比高度。

.content { position: absolute; background-color: #ccc; height: 200px; width: 400px; margin: -100px 0 0 -200px; top: 50%; left: 50%;}

其容器樣式元素結果如下圖。

而兩個四分之一圓需要使用圓角邊框border-radius設置，其設置單個半徑的 語法 為 border-radius: top-left top-right bottom-right bottom-left。左上角的圓半徑應該設置在第三個值上，并且元素的位移應該設置為top和left為零來貼合到容器邊框上。

.leftquarter { top: 0; left: 0; -moz-border-radius: 0 0 50px 0; /* 四分之一圓 */ -webkit-border-radius: 0 0 50px 0; border-radius: 0 0 50px 0;}

同理，右下角的圓半徑一個設置在第一個值上，并將其貼合在容器的右下角。

.rightquarter { right: -350px; bottom: -100px; -moz-border-radius: 50px 0 0 0; /* 四分之一圓 */ -webkit-border-radius: 50px 0 0 0; border-radius: 50px 0 0 0; }

當然，他們繼承一個公共樣式position: relative，以設置元素的位移。

.element { position: relative; background-color: #fc0; height: 50px; width: 50px; }

結果如下圖，無論瀏覽器窗口怎么變化，元素始終居中。

demo 地址 。

參考：

居中方法詳解

CSS制作圖形速查表

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com