CSS的不等高垂直居中是一個比較常見的需求,在設計響應式布局時非常有用。不等高垂直居中指的是將不同高度的元素在其父元素中居中對齊。
要達到這個效果,可以使用以下方法:
.parent{ display: flex; align-items: center; }
這里使用了Flexbox布局,將其父元素設為彈性容器,通過設置align-items屬性為center使子元素在垂直方向上居中對齊。
如果需要讓子元素在水平方向上也居中對齊,可以加上justify-content屬性:
.parent{ display: flex; align-items: center; justify-content: center; }
這樣設置后,子元素就能在水平方向和垂直方向上都居中對齊了。
如果不想使用Flexbox布局,還可以用position屬性實現不等高垂直居中:
.parent{ position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); }
這里將父元素設為相對定位,將子元素設為絕對定位,通過設置top屬性為50%將其上下居中對齊,再通過transform屬性在垂直方向上移動其高度的一半。
總之,不等高垂直居中是一個經常使用的技巧,在網站的響應式布局中非常實用。