在CSS中,將塊元素上下居中顯示是常見問題之一。這個問題可以使用下面的 CSS 屬性來解決。
1. line-height 這種方法只適用于單行文本。你可以將行高設置為與容器的高度相同來使文本居中。例如:
.container { height: 300px; line-height: 300px; }
2. 使用 flexbox 這是最簡單和最常見的方法來將元素垂直居中。使用flex布局,將容器的display屬性設置為flex,然后使用align-items屬性將項目居中。
.container { display: flex; align-items: center; justify-content: center; }
3. 使用 table-cell 方法。將容器的display屬性設置為table,然后將其直接子元素的“display”屬性設置為table-cell,使用“vertical-align”屬性使元素垂直居中。
.container { display: table; } .container div { display: table-cell; vertical-align: middle; }
以上是幾種常見的CSS方法來使塊元素上下居中顯示。通過適當的選擇,可以通過這些方法來解決大多數的上下居中問題。