如何在不修剪內容的情況下垂直和水平居中 DIV？

不進行內容修剪的垂直和水平DIV 居中

您對在不切斷內容的情況下垂直和水平居中DIV 的擔憂是一個常見的。雖然使用絕對定位和負邊距的傳統方法可能有效，但如果視窗大小變得小於 DIV 內容，則可能會導致內容被截斷。

幸運的是，對於現代瀏覽器，還有更先進的選項：

Flexbox

HTML：

<div>
<br><p>CSS:</p>
<br><pre class="brush:php;toolbar:false">.content {<br>位置：絕對；<br> 左：50%；<br> 頂部：50%；<br> -webkit-transform: 翻譯(-50%, -50%);<br> 轉換：翻譯( -50%, -50%);<br>}<br>

此解利用變換屬性將DIV內容在兩個方向上平移50%，確保其中心與中心對齊

注意： Flexbox 在舊版本中並未得到廣泛支援瀏覽器，因此在實施此解決方案時考慮瀏覽器相容性非常重要。