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

透過內容保留將DIV 水平和垂直居中

在水平和垂直對齊DIV 至關重要且內容必須保留的情況下完好無損無損，有必要找到避免負數絕對定位缺點的方法

雖然Flexbox提供了一種可以很好地對齊內容的現代解決方案，但它可能不適合舊版瀏覽器。為了獲得更廣泛的相容性，請考慮以下方法：

HTML:

<div>

CSS:

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

此方法利用絕對定位和CSS 轉換( -webkit-transform和變換）使DIV 居中。變換函數將 DIV 的位置在兩個方向上移動其寬度和高度的一半。這可確保無論視窗大小或內容變化如何，內容都會保留。

在 Codepen 或 JSBin 上進一步探索此技術以見證其有效性。對於較舊的瀏覽器支持，可能需要本線程其他地方討論的替代方法。

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