在Web開發(fā)中，高度居中是非常常見的樣式需求。尤其是在響應(yīng)式布局中，我們需要在各種屏幕尺寸下讓內(nèi)容始終垂直居中。CSS提供了多種方法來實(shí)現(xiàn)高度居中效果。

/* 1. 使用flex布局 */
.container {
display: flex;
justify-content: center; /* 橫向居中 */
align-items: center; /* 縱向居中 */
}
/* 2. 使用absolute定位和負(fù)margin值 */
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 3. 使用table-cell布局 */
.container {
display: table-cell;
vertical-align: middle;
}
.content {
/* 保持原有的塊級元素特性 */
display: inline-block;
/* 防止被換行 */
white-space: nowrap;
}
/* 4. 使用line-height屬性 */
.container {
height: 200px; /* 必須設(shè)置高度 */
line-height: 200px; /* 與高度相等 */
text-align: center; /* 橫向居中 */
}

以上幾種方法都可以實(shí)現(xiàn)高度居中效果，不同場景需求選擇不同的解決方案。同時，我們也要注意兼容性和瀏覽器兼容問題。