如何将 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中文网其他相关文章！