容器 Div 内的垂直元素对齐

您打算在容器 div 内垂直对齐两个元素。 phrogz.net 上的教程没有产生预期的结果。本文探讨了两种实现垂直对齐的有效方法。

使用 CSS Flexbox 的方法：

CSS Flexbox 提供了一种有效的垂直居中元素的方法：

<预>

容器{

display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

}

将 flex-direction 设置为 'column' 时，项目垂直堆叠，而 'justify-content: center' 和 'align -items: center' 分别确保垂直和水平居中。

使用 CSS Table 和定位：

此方法涉及利用表格属性和绝对定位：

body {<pre class="brush:php;toolbar:false">display: table;
position: absolute;
height: 100%;
width: 100%;

}

容器{

display: table-cell;
vertical-align: middle;

}

这里，body元素设置为表格，容器元素设置为表格单元格。将 'vertical-align' 设置为 'middle' 可以使容器在主体内垂直对齐。

选择哪种方法：

为了简单和高效，Flexbox推荐使用，特别是因为它具有广泛的布局选项和响应式特性。 Flexbox 也得到了浏览器的广泛支持，除了老版本的 IE。

以上是如何垂直对齐容器 div 内的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！