CSS中垂直居中的實現方式有很多種,這里介紹其中幾種常用的方法。
第一種方式是使用絕對定位。我們可以將要垂直居中的元素設置為絕對定位,然后通過top和bottom屬性來將其完全居中。
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
第二種方式是使用flex布局。我們可以將父元素設置為flex,然后通過align-items和justify-content來將子元素居中。
.parent { display: flex; align-items: center; justify-content: center; } .child { /* 無需特別設置 */ }
第三種方式是使用table布局。我們可以將父元素設置為table,將子元素設置為table-cell,然后通過vertical-align屬性來使其垂直居中。
.parent { display: table; } .child { display: table-cell; vertical-align: middle; }
總結一下,以上三種方式都可以使元素垂直居中。具體使用哪種方式,可以根據具體情況來選擇。比如如果要支持低版本IE瀏覽器,那么使用table可能更好一些。