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

不进行内容修剪的垂直和水平 DIV 居中

您对在不切断内容的情况下垂直和水平居中 DIV 的担忧是一个常见的。虽然使用绝对定位和负边距的传统方法可能有效，但如果窗口大小变得小于 DIV 内容，则可能会导致内容被截断。

幸运的是，对于现代浏览器，还有更先进的选项：

Flexbox

HTML：

<div>

CSS:

.content {<br> 位置：绝对；<br> 左：50%；<br> 顶部：50%；<br> -webkit-transform: 翻译(-50%, -50%);<br> 转换：翻译( -50%, -50%);<br>}<br>

此解决方案利用变换属性将 DIV 内容在两个方向上平移 50%，确保其中心与中心对齐

注意： Flexbox 在旧版本中并未得到广泛支持浏览器，因此在实施此解决方案时考虑浏览器兼容性非常重要。

以上是如何在不修剪内容的情况下垂直和水平居中 DIV？的详细内容。更多信息请关注PHP中文网其他相关文章！