剛開始工作的時候,css 裡的豎直居中一直是個老大難問題。每次用到的時候都去網上搜,搜,搜,半天才搜到合适的解決方法。然後下次遇到,呃,又忘了~
後來仔細回憶了一下,其實CSS實作豎直居中是有幾種不同的應用場景的,需要分别使用不同的解決方法。這也是為啥每次都覺得,诶上次那個解決方法好像不行呢?(原來并不是我智商的問題)好了廢話不多說,記錄下遇到的不同場景及解決方法,希望能對自己或者别人有所幫助。
inline 或者 inline-* 的元素豎直居中
可以借助 padding, line-height, vertical-align 等屬性。有如下兩種具體情景:
1. 單行豎直居中,如單行文本或者連結
這種情況,通過給元素上下添加相同大小的 padding 值即可實作豎直居中。
1 2 3 | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | |
如果就不想使用 padding 不友善使用 padding 時,可以通過給元素設定 line-height,使其等于父容器的高度,進而實作豎直居中。注意,此時記得要考慮父容器的 padding 和 border 帶來的高度變化。
2. 多行豎直居中,如多行文本
和單行文本一樣,給元素上下添加相同大小的 padding 值,還是好用滴~
1 2 3 4 5 6 | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | |
另外一種方法,是借助 table 的屬性:将父容器設定成 table,需要豎直居中的元素設定為 table-cell,然後就可以使用 vertical-align 屬性來居中了。
1 2 3 4 5 | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | |
塊級元素豎直居中
通常借助 絕對定位 和 translate 等手段,在已知或者未知塊級元素高度時,分别使用不同的方法。
1. 塊級元素高度已知
此時可以使用絕對定位的方法,并借助 margin 可以為負值的特性,實作絕對定位居中:
/* 已知元素高度為 100px (也可以是百分比,如 80%)*/
height: 100px;
/* 先使用絕對定位,将元素的上邊界置于豎直的中間*/
position: absolute;
top: 50%;
/* 再使用margin-top,将元素向上移動自身高度的一半*/
margin-top: -50px;
1 2 3 4 5 6 | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | |
筆者表示類似這段代碼的使用頻率簡直不要太高~ 于是在使用 scss 的前提下,自己封裝了一個 mixin,專門用來實作這種定位方式。
// 定義絕對定位實作水準、垂直居中
@mixin abs_h_center($width) {
position: absolute;
width: $width;
left: 50%;
margin-left: -($width/2);
}
@mixin abs_v_center($height) {
position: absolute;
height: $height;
top: 50%;
margin-top: -($height/2);
}
// 然後使用的時候直接引用就可以了,這樣可以避免在改動元素寬或高時,還需要同時去改 margin-left 或者 margin-top 的值
.content {
@include abs_v_center(200px);
}
2. 塊級元素高度不固定
與上面提到的使用絕對定位居中的方法原理類似,隻不過在元素高度不确定的情況下,借助 translateY 使元素向上移動自身高度的一半,進而實作豎直居中。更多精彩内容關注微信公衆号:全棧開發者中心(admin10000_com)
/* 先将元素的上邊界置于豎直的中間*/
position: relative;
top: 50%;
/* 再使用 translateY,将元素向上移動自身高度的一半*/
transform: translateY(-50%);
1 2 3 4 5 6 | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | |
目前想到的就這些,應該足夠覆寫大部分的使用情況了~ 以上這些實作方法,當然也可以是混合使用的,具體如何,就看應用場景啦。