使用 flex 的中心 div - CSS (1)

📌 相关文章

📜 使用 flex 的中心 div - CSS (1)

📅 最后修改于: 2023-12-03 15:06:46.413000 🧑 作者: Mango

使用 flex 的中心 div - CSS

简介

Flexbox 是一种 CSS 布局模式，它允许设计者创建灵活的和响应式的布局。在 Flexbox 中，容器中的元素可以相对于容器本身和其他元素自动对齐和拉伸，其中一个常见用例是将 div 元素置于其容器的中心。

如何实现？

要将 div 元素置于其容器的中心，可以使用以下 CSS 属性：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这三个属性分别为：

display: flex：将容器设置为 Flexbox 布局模式
justify-content: center：将容器的子元素水平居中
align-items: center：将容器的子元素垂直居中

示例代码

下面是一个简单的 HTML 页面的示例代码，其中 div 元素被置于容器中心。

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox 中心 div</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .box {
      background-color: #f8f8f8;
      padding: 30px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box">这是一个居中的 div 元素</div>
  </div>
</body>

</html>

总结

在 Flexbox 中，将 div 元素置于其容器的中心非常容易。只需使用几个简单的 CSS 属性，就可以轻松实现此功能。此示例代码还展示了使用 Flexbox 来创建响应式，灵活和美观的布局的潜力。