置中對齊 篇
垂直 置中對齊 Vertical Align
使用 CSS 語法要設定一個 div 水平置中，是很常見到的需求，而水平置中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕鬆解決掉水平置中的問題。
但一直以來最麻煩對齊問題，都是「垂直置中」這個討人厭的設定， 「垂直置中」的方法、起碼有10種以上，騎牛也有20種，不用學太多，夠用就好。
以下將介紹幾種 CSS 垂直置中的方式
設定 absolute + margin負值的技巧
範例物件一塊高、200px，寬、300px 的 div元素， 將屬性設定成 position: absolute; 絕對位置
設定 #block 的座標位置 right 和 top 各50%，這樣 DIV物件的右上角，剛剛好就會是畫面的正中央位置， 接著再將要置中物件的 marign-top、margin-right 各設定為自身負一半的高度，把 div 位移至垂直及水平置中，網頁的正中央
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% 就能達成置中的目的了。
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 即可置中。height: 200px;
width: 300px;
background-color: black;
position: absolute; /*絕對位置*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto; /*方框外距離平均分配*/
}
設定 absolute + %百分比 的技巧
利用 %百分比平均分配邊距，以達成置中。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 區塊內的元素(內容物件)
<div id="block"> ❤️❤️❤️ ❤️❤️❤ </div>
設定行高 Line-height 的技巧
適用：單行文字垂直置中
若將行內元素 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中
注意 :是行內元素垂直置中，不是垂直對齊哦!
line-height:200px; /*垂直置中*/
}
#block {
line-height:200px;
text-align:center; /*水平置中*/
}
❤垂直置中️❤
❤垂直置中️ + 水平置中❤
設定行高 Line-height + inline-block 的技巧
適用：多行文字垂直置中
<div id="block">
<p id="inline"> 1.❤️❤️❤️ ❤️❤️❤ <br> 2.多行文字置中 <br> 3.🦁🦁🦁🦁🦁 </p>
</div>
設定行高 ( line-height ) 只會使單行文字被垂直置中， 倘若要讓多行文字被垂直置中，可以嗎? 答案是 ~ 要把內層的多行物件，包裹成一個行列區塊 inline-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 屬性來將資料垂直置中了。
width: 500px;
height: 250px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
設定Flex + margin 的技巧
在父層物件 #block 設定 display: Flex，接著在需要垂直置中(#inline)的物件上設定 margin: auto 即可自動置中囉。
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 屬性以後再討論。
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: Grid;
}
#inline {
width: 400px;
background: #ccc;
margin:auto;
}
使用 calc 的技巧
利用 calc() 這個「計算」函數，將百分比即時且動態的計算出實際要的置中高度位置。
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;
}
留言列表