如何使 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中文網其他相關文章！