如何使 DIV 内的两个段落垂直居中？

如何在 DIV 中垂直居中两个元素

挑战：尽管遵循以下规定，但在 DIV 中垂直居中两个段落元素已被证明具有挑战性

解决方案：

在 DIV 中垂直居中元素有两种主要方法：Flexbox 和 CSS 表格和定位。

Flexbox 方法

利用Flexbox，您可以用最少的时间实现精确对齐代码：

#container {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

Flexbox 方法的优点：

• 最少的代码
• 简化对齐
• 多功能布局选项
• 有反应设计

CSS 表格和定位方法

另一种方法涉及 CSS 表格和定位：

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

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

.box {
  width: 300px;
  padding: 5px;
  margin: 7px auto;   
  text-align: center;
}

何时使用 Flexbox 与 CSS 表格和定位：

Flexbox 是推荐选择，因为它：

• 卓越的效率
• 全面的布局功能
• 增强的浏览器支持

Flexbox 轻松促进垂直居中和其他高级对齐任务，使其成为现代 Web 开发的首选。

以上是如何使 DIV 内的两个段落垂直居中？的详细内容。更多信息请关注PHP中文网其他相关文章！