CSS中實現多行垂直居中顯示是一個非常常見的需求。本文將介紹在不同情況下如何使用CSS實現多行垂直居中顯示。

/*純文本實現垂直居中*/
.container {
display: flex;
align-items: center; /*垂直居中*/
}
/*嵌套塊級元素實現垂直居中*/
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/*使用偽元素實現垂直居中*/
.container {
position: relative;
}
.content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /*避免多余空隙*/
}
.content {
display: inline-block;
vertical-align: middle;
}
/*使用表格布局實現垂直居中*/
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
}
/*使用flexbox實現垂直居中*/
.container {
display: flex;
align-items: center;
justify-content: center;
}

通過使用上述不同的CSS技術，可以輕易實現多行垂直居中顯示。具體使用哪種技術，可以根據實際情況來決定。需要注意的是，在某些情況下，例如嵌套塊級元素時，可能會出現高度塌陷的問題，需要特別注意。