說到垂直置中一直是網頁設計師的痛,早期解決方法沒有那麼多,最常見到的就是height
= line-height
這種方式,可是這方式彈性很低,如果遇到多行文字就無法使用。
然而隨著CSS的演進,越來越多種垂直置中的方法,這邊就介紹幾種實用性高的垂直置中方法。
條件
這篇文章所介紹的垂直置中方式,都不會使用絕對值(px),大多可以運用在各種環境,但實際上還是需要配合CSS的特性去做選用。
這次用鳴人的圖片來做介紹,這張圖片是用背景的方式載入。
//sass code
.naruto
background-image: image-url("narutoR.png")
background-color: orange
background-repeat: no-repeat
width: (image-width("narutoR.png") / 2)
height: (image-height("narutoR.png") / 2)
+background-size(cover)
外框的部分就直接加入height: 350px
的屬性。
%box
height: 350px
方法一:table
此table
不是真table,這是IE8以上才支援的CSS語法,將div的屬性轉成table,再套用垂直置中的方式來完成。
優點:概念簡單、支援度高(IE8+)
缺點:html結構較多層、有table的特性
.table
@extend %box
display: table
width: 100%
.table-cell
display: table-cell
vertical-align: middle
.naruto
margin: 0 auto
方法二:display: inline-block
vertical-align: middle
可以做垂直置中,但是限制只能使用在inline
及inline-block
上,而且還有諸多的限制…,但是透過一點小技巧,vertical-align: middle
會是一個非常實用的置中方式(目前也常把這方法套用在專案上)。
重點在於透過偽元素製作一個垂直100%的物件,而需要置中的元素也轉換為inline-block
,並且套用vertical-align: middle
。
優點:相容性不錯,如果要ie7則必須自己手動插入偽元素的部分。
缺點:必須轉成inline-block
.box-wrap
@extend %box
text-align: center
&:before
content: ""
display: inline-block
height: 100%
vertical-align: middle
.naruto
display: inline-block
vertical-align: middle
什麼是vertical-align:http://css-tricks.com/what-is-vertical-align/
方法三:
這方法類似於margin: 0 auto
的水平置中,但套用在垂直的元素上,只要將內元素設定absolute
並將上下左右的距離皆設定為0,再補上margin: auto
就大功告成了,但這方法只能用在內元素有明確的寬與高。
優點:相容性高
缺點:內元素必須有明確的寬高值
.box-wrap
@extend %box
position: relative
.naruto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
margin: auto
方法四:translateY(- 50%)
以前常會用一種方式做垂直置中top: 50%; margin-top: -(元素高 / 2);
,先用top往下推50%的距離,再利用margin-top拉回元素的一半高度,這方式雖然很好用,但是必須用在元素有明確高度上。
而這邊所介紹是相同的道理,但是是用transform: translateY(- 50%)
將元素垂直向上50%的距離,這50%則是元素的高度,且語法都集中在元素上。
優點:如果不提到ie就沒有缺點
缺點:如果提到ie就是缺點(ie9+)
.naruto
position: relative
top: 50%
margin: 0 auto
+transform(translateY(- 50%))
方法五:flex
近幾年W3C針對CSS的layout提出了新的語法 flex
,經過多番的波折目前也差不多定案,所以主流的瀏覽器幾乎都支援 flex
。
透過Compass(1.0+),許多前輟詞都可以省略。
.flex-wrap
+display-flex //flex
+flex-wrap(wrap) //flex外框
+align-items(center) //水平置中
+justify-content(center) //垂直置中
優點:很潮
缺點:如果提到ie就是缺點(全部)、建議熟悉flex概念
前年的鐵人賽我有介紹過flex,也可以參考前年的文章,flex看似簡單,但似乎沒有那麼容易…。