如何將 Div 內的兩個元素垂直居中？

如何在div中垂直居中兩個元素

要在div中垂直對齊兩個元素，可以使用以下方法之一：

1。 CSS Flexbox 方法

此方法涉及使用 flexbox 屬性來設定元素的 Flex 方向、對齊方式和對齊方式。

CSS 代碼：

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

此程式碼將建立一個靈活的容器，該容器垂直堆疊元素並將它們水平居中和居中垂直。

2。 CSS 表格和定位方法

此方法使用 display: table 和 Vertical-align: middle 屬性來垂直對齊 div 內的元素。

CSS 程式碼：

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

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

此程式碼將使body 元素表現得像一個表格，並且#container div 將被定位為表格單元格並在

推薦

Flexbox由於其現代化的方法、靈活性和易用性，通常比表格和定位方法更受推薦。

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