CSS中方塊垂直居中是前端開發中常見的需求之一。本文將介紹幾種常見的垂直居中方案。

/* 方案一：元素為絕對定位 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方案二：使用flex布局 */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
.child {
/* 不需要設置任何樣式 */
}
/* 方案三：使用grid布局 */
.parent {
display: grid;
place-items: center;
}
.child {
/* 不需要設置任何樣式 */
}

將元素設置為絕對定位或使用flex/grid布局都可以實現方塊的垂直居中。使用哪種方案需要根據具體情況而定。