垂直和水平居中固定 div - CSS

在 web 开发中，垂直和水平居中是常见需求之一。在这篇文章中，我们将学习如何使用 CSS 实现一个固定 div 的垂直和水平居中。

使用 flex 实现居中

flex 是现代 CSS 布局中的一个强大工具，可以轻松实现垂直和水平居中。我们可以将固定的 div 放在一个具有 display:flex 的父容器中，并对父容器和子容器应用一些属性。

例如，以下代码片段可以实现一个宽和高都为 300px 的固定 div 在屏幕中垂直和水平居中。

div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div.child {
  width: 300px;
  height: 300px;
}

在上述代码中，我们使用了 flex 布局中的 justify-content 和 align-items 属性来使子容器在父容器中居中。height: 100vh 是为了让父容器铺满整个屏幕。

使用定位实现居中

除了使用 flex，我们还可以使用定位来实现固定 div 的垂直和水平居中。我们可以将固定的 div 放在一个具有 position:relative 的父容器中，并对子容器应用一些属性。

例如，以下代码片段可以实现一个宽和高都为 300px 的固定 div 在屏幕中垂直和水平居中。

div.parent {
  position: relative;
  height: 100vh;
}

div.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

在上述代码中，position:relative 使得父容器成为子容器的相对定位容器。使用 position:absolute 和 top:50%, left:50% 将子容器定位到父容器的中心。使用 transform: translate(-50%, -50%) 使子容器往回移动其自身宽度和高度的一半，以便完全居中。

结论

在本文中，我们学习了两种在 CSS 中实现固定 div 的垂直和水平居中的方法：使用 flex 和使用定位。这是一个非常常见的需求，这些技术将对你在 web 开发中进行布局设计时非常有用。