我可以使用'margin: auto”將 DIV 垂直居中嗎？

使用邊距垂直對齊DIV：自動

問題：

是否可以使用邊距將DIV 垂直居中：自動自動；？為什麼不垂直對齊：中間；工作嗎？

答案：

關於 Margin：

不幸的是，margin:auto auto;沒有實現垂直居中。頁邊距不適用於區塊級元素，例如用於垂直對齊的 DIV。因此，margin:top:auto 和 margin-bottom:auto 是無效的。

關於vertical-align:middle;:

vertical-align:middle;只適用於內嵌元素，不適用於 DIV 等區塊級元素。

解決方法：

由於無法使用邊距垂直居中 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>

以上是我可以使用'margin: auto”將 DIV 垂直居中嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！