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

在不剪切內容的情況下水平和垂直居中DIV

在垂直和水平居中DIV 時，確保內容保持完整（即使視窗發生變化）也至關重要變得小於內容本身。

一種常見的方法涉及絕對定位和負邊距。但是，這種方法可能會導致視窗尺寸減小時內容被截斷。

對於現代瀏覽器，使用Flexbox 可以提供更好的解決方案：

HTML

<div>

CSS

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

此方法利用此方法利用轉換來翻譯內容而不影響其大小。因此，無論視窗尺寸如何，內容都保持居中。

以上是如何在不剪切內容的情況下水平和垂直居中 DIV？的詳細內容。更多資訊請關注PHP中文網其他相關文章！