透過內容保留將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中文網其他相關文章！
