如何使 div 內的兩個元素水平和垂直居中？

在 ver div 內水平居中兩個元素

在提供的程式碼片段中遇到了 div 中垂直居中元素的問題。使用建議的教程似乎沒有解決問題。

Flexbox 解：

實作 Flexbox 屬性以在 div 內垂直和水平對齊元素：

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

桌子和位置解決方案：

或者，考慮使用CSS表格和定位的組合來定位元素：

#container {
  display: table;
  vertical-align: middle;
}

.banner {
  display: table-cell;
}

方法選擇的注意事項：

在兩種方法之間進行選擇時，請考慮以下因素因素：

• 簡單性： Flexbox 為居中元素提供了更簡潔的程式碼。
• 瀏覽器支援： Flexbox 受到主流瀏覽器的支持，而表格和定位方法可能需要供應商前綴相容性。
• 反應能力： Flexbox 支援響應式佈局，允許元素調整以適應不同的螢幕尺寸。

其他建議：

• 使用 margin: auto 屬性將元素水平居中橫幅。
• 調整 .bannerrightinner 類別的上邊距，以確保段落內的文字垂直居中。

以上是如何使 div 內的兩個元素水平和垂直居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！