如何在保留 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中文网其他相关文章！