2- 版面配置 ~ 置中對齊

置中對齊 篇

垂直 置中對齊 Vertical Align

使用 CSS 語法要設定一個 div 水平置中，是很常見到的需求，而水平置中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕鬆解決掉水平置中的問題。

但一直以來最麻煩對齊問題，都是「垂直置中」這個討人厭的設定， 「垂直置中」的方法、起碼有10種以上，騎牛也有20種，不用學太多，夠用就好。
以下將介紹幾種 CSS 垂直置中的方式

設定 absolute + margin負值的技巧

範例物件一塊高、200px，寬、300px 的 div元素， 將屬性設定成 position: absolute; 絕對位置

<div id="block"> 高、200px，寬、300px </div>

設定 #block 的座標位置 right 和 top 各50%，這樣 DIV物件的右上角，剛剛好就會是畫面的正中央位置， 接著再將要置中物件的 marign-top、margin-right 各設定為自身負一半的高度，把 div 位移至垂直及水平置中，網頁的正中央

#block {
height: 200px;
width: 300px;
background-color: black;

position: absolute; /*絕對位置*/

top: 50%; /*從上面開始算，下推 50% (一半) 的位置*/
right: 50%; /*從右邊開始算，左推 50% (一半) 的位置*/
margin-top: -100px; /*高度的一半*/
margin-right: -150px; /*寬度的一半*/

}

設定 absolute + translate 的技巧

絕對定位置中的另一個移位方式，此方式置中的定位物件不需要固定的寬跟高。
利用 transform:translate(50%, 50%) 位移置中物件自身寬與高的 50% 就能達成置中的目的了。

#block {
width: 300px;
background-color: black;
position: absolute;

bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}

設定 absolute + margin auto 的技巧

這個方式比較特別一點，當物件設定絕對定位之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但當你設定了 top: 0; bottom: 0 時，絕對定位物件就抓到可運用的空間了，這時你的 margin: auto 就生效了，如果你的絕對定位物件需要水平置中於父層，那你同樣可以設定 left: 0; right: 0; 來讓絕對定位物件取得空間可運用範圍，再讓 margin-left 與 margin-right 設定為 auto 即可置中。

#block {
height: 200px;
width: 300px;
background-color: black;
position: absolute; /*絕對位置*/

top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto; /*方框外距離平均分配*/

}

設定 absolute + %百分比 的技巧

利用 %百分比平均分配邊距，以達成置中。

#block {
background-color: black;
position: absolute;

width:60%; left:20%; /* (100-60)/2 */
height:80%; top:10%; /* (100-80)/2 */

}

#block {
background-color: black;
position: absolute;

top: 20%;
right: 20%;
bottom: 20%;
left: 20%;
}

以下要介紹的定位方法，不再是作用在#block 區塊 DIV 物件本身， 而是包含在#block 區塊內的元素(內容物件)

HTML

<div id="block"> ❤️❤️❤️ ❤️❤️❤ </div>

設定行高 Line-height 的技巧

適用：單行文字垂直置中
若將行內元素 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中
注意 :是行內元素垂直置中，不是垂直對齊哦!

#block {

line-height:200px; /*垂直置中*/

}

#block {

line-height:200px;
text-align:center; /*水平置中*/
}

❤垂直置中️❤

❤垂直置中️ + 水平置中❤

設定行高 Line-height + inline-block 的技巧

適用：多行文字垂直置中

HTML

<div id="block">
<p id="inline"> 1.❤️❤️❤️ ❤️❤️❤ <br> 2.多行文字置中 <br> 3.🦁🦁🦁🦁🦁 </p>
</div>

設定行高 ( line-height ) 只會使單行文字被垂直置中， 倘若要讓多行文字被垂直置中，可以嗎? 答案是 ~ 要把內層的多行物件，包裹成一個行列區塊 inline-block

#block {

text-align:center; /*水平置中*/
line-height:200px; /*垂直置中*/

}

#inline {

display: inline-block;
line-height:1.2;
width: 200px;
background: #99aa99;
vertical-align: middle;
}

 

1.❤️❤️❤ ️❤️❤️❤
2.多行文字置中
3.🦁🦁🦁🦁🦁

設定Display: table-cell 的技巧

使用 display 屬性將 div 設定成表格的儲存格(td)，這樣就能利用支援儲存格垂直對齊的 vertical-align: middle 屬性來將資料垂直置中了。

#block {

width: 500px;
height: 250px;
text-align: center;
display: table-cell;
vertical-align: middle;

}

設定Flex + margin 的技巧

在父層物件 #block 設定 display: Flex，接著在需要垂直置中(#inline)的物件上設定 margin: auto 即可自動置中囉。

#block {

width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: Flex;

}

#inline {

width: 400px;
background: #ccc;
margin:auto;
}

設定Grid + margin 的技巧

這個設定是否感覺和上一個一樣 ? 只差display: Grid，其實格線Grid和Flex盒子， 有些屬性，是一樣的，都可以做到垂直置中，其他的 Grid和Flexbox 屬性以後再討論。

#block {

width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: Grid;

}

#inline {

width: 400px;
background: #ccc;
margin:auto;
}

使用 calc 的技巧

利用 calc() 這個「計算」函數，將百分比即時且動態的計算出實際要的置中高度位置。

#block {

width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;

}

#inline {

width: 400px;
height: 100px;
position: relative;
top:calc((100% - 100px) / 2);
background: #ccc;
margin:auto;
}