如何在保留內容的同時完美水平和垂直居中 Div？

水平和垂直 Div 居中並保留內容

在 Web 開發領域，通常需要將 div 水平和垂直居中垂直。雖然絕對定位和負邊距等傳統方法可以實現這一點，但它們通常會在 div 不完全可見時剪切內容。本文提出了一種解決方案，可確保無論視窗大小如何，內容始終顯示。

現代瀏覽器解決方案：Flexbox

對於現代瀏覽器，flexbox 提供了一個優雅的解決方案對於這個問題。使用 Flexbox，可以透過將父容器設定為 display: flex 並將子 div 設定為 margin: auto 來居中顯示內容。

<div class="parent">
  <div class="child">This works with any content</div>
</div>

.parent {
  display: flex;
}

.child {
  margin: auto;
}

舊版瀏覽器支援

對於不支援flexbox的瀏覽器，可以使用CSS轉換。將 div 設定為position：absolute、left：50%、top：50%，然後套用translate(-50%, -50%) 變換，div 將會居中。

<div class="content">This works with any content</div>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

透過使用 Flexbox 或 CSS 轉換，可以將 div 水平和垂直居中，確保內容始終可見，無論視窗大小如何。

以上是如何在保留內容的同時完美水平和垂直居中 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！