如何使用 CSS 將 Div 垂直居中？-css教學-PHP中文網

如何使用 CSS 將 Div 垂直居中？

Patricia Arquette

發布： 2024-12-10 13:35:13

原創

507 人瀏覽過

How Can I Vertically Center a Div Using CSS?

使用 Margin:Auto 垂直對齊 Div

當涉及到水平居中 div 時，常用的技術是 margin: 0 auto 。但是，對於垂直對齊，margin:auto auto 語法無法如預期般運作。

為什麼 Vertical-Align:Middle不起作用

另一個潛在的解決方案，垂直對齊：中間，失敗，因為它僅適用於內聯級元素，而不適用於區塊級元素，例如

垂直對齊邊距的限制

使用margin: auto垂直會導致問題：

Margin-top: auto 和margin-bottom：自動導致零使用值。
margin-top： -50% 相對於包含區塊的寬度計算，而不是其高度。

垂直對齊的解決方法

雖然無法使用垂直對齊 div利潤可能令人沮喪，但有解決方法。一種流行的方法涉及嵌套三個元素：

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}
.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

登入後複製

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

登入後複製

此技術有效地將 div 在其父容器內垂直居中。

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