如何使用Flex布局实现简单的水平居中？

翻滚的胖子
2023-07-20 09:59:21
前端技术
JavaScript 杂七杂八

在本文中，我们将介绍如何使用Flex布局实现简单的水平居中效果。

什么是Flex布局？

Flex布局是一种弹性盒模型，它提供了一种更加灵活的布局方式，能够轻松实现各种复杂的布局效果。

如何使用Flex布局实现水平居中？

要实现水平居中，我们需要做以下几个步骤：

1. 设置父元素的display为flex：

.container {
  display: flex;
}

2. 设置父元素的justify-content为center：

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

3. 在父元素中添加子元素：

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

.child {
  /* 子元素样式 */
}

代码案例

下面是一个完整的代码案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
    }
    
    .child {
      width: 200px;
      height: 200px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child"></div>
  </div>
</body>
</html>

运行以上代码，你将看到一个红色的正方形居中显示在页面上。