如何在保留内容的同时完美水平和垂直居中 Div？

水平和垂直 Div 居中并保留内容

在 Web 开发领域，通常需要将 div 水平和垂直居中垂直。虽然绝对定位和负边距等传统方法可以实现这一点，但它们通常会在 div 不完全可见时剪切内容。本文提出了一种解决方案，可确保无论窗口大小如何，内容始终显示。

现代浏览器解决方案：Flexbox

对于现代浏览器，flexbox 提供了一个优雅的解决方案对于这个问题。使用 Flexbox，可以通过将父容器设置为 display: flex 并将子 div 设置为 margin: auto 来居中显示内容。

<div class="parent">
  <div class="child">This works with any content</div>
</div>

.parent {
  display: flex;
}

.child {
  margin: auto;
}

旧版浏览器支持

对于不支持flexbox的浏览器，可以使用CSS转换。通过将 div 设置为position：absolute、left：50%、top：50%，然后应用translate(-50%, -50%) 变换，div 将居中。

<div class="content">This works with any content</div>

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

通过使用 Flexbox 或 CSS 转换，可以将 div 水平和垂直居中，确保内容始终可见，无论窗口大小如何。

以上是如何在保留内容的同时完美水平和垂直居中 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！