在網頁布局中,要居中一個元素是很常見的需求。其中,水平居中相對簡單,但垂直居中因為不知道元素的高度而稍微復雜一些。
下面介紹一種基于Flexbox
的方法來實現CSS未知高度的垂直居中。
.parent { display: flex; justify-content: center; align-items: center; }
上述代碼中,使用Flexbox
我們可以將父元素的display
屬性設置為flex
,然后再將justify-content
和align-items
屬性設置為center
即可實現水平和垂直居中。
此外,還可以使用絕對定位的方式來實現元素的垂直居中。上述Flexbox
的方法支持IE10及以上版本,而使用絕對定位則可以兼容更舊版本的瀏覽器。
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
上述代碼中,我們先將父元素的position
屬性設置為relative
,再將子元素的position
屬性設置為absolute
,top: 50%
將元素往下移動50%的高度,再使用transform: translateY(-50%)
將元素往上移動50%的高度,就可以實現未知高度元素的垂直居中了。
綜上所述,以上兩種方法都可以實現CSS未知高度的垂直居中,選擇使用哪種方式可以根據自己項目的實際需求和瀏覽器兼容性來決定。