CSS Flexbox 布局实现水平居中-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox 布局

Flexbox 布局是一种盒模型，用于构建不规则的、自适应的、动态的布局方式。它通过弹性盒子模型（flexbox）来实现来自不同尺寸和可变数量的元素应对页面布局和用户界面的要求的功能。

Flexbox 布局包括两个主要的组件: 容器（container）和项目（item）。容器用来定义 flexbox 布局的上下文，而项目则是属于此上下文的灵活的子元素。

Flexbox 布局解决了什么问题

在 web 开发领域，布局是一个很重要的概念。一些前端开发者会遇到一些经典的页面布局问题，其中之一就是如何在页面中对一个元素水平居中对齐。这个问题在开发响应式网站时尤其突出，因为在不同分辨率下都要实现水平居中。

传统的 CSS 布局行业主要是通过文档流的方式实现移动元素或者通过 position (absolute & relative) 进行元素的定位。这些方法都有一些很严重的局限，比如不适用于父元素高度未知、需要期望子元素灵活响应、以及浏览器窗口大小变化时子元素视图卡顿等问题。

而 Flexbox 布局则很好的解决了这些问题，借助 Flexbox 布局技能可以在不使用 CSS hack 的情况下轻松实现水平居中效果。

Flexbox 布局如何实现水平居中

Flexbox 布局中有两个主要的属性可以用来实现水平居中：justify-content 和 align-items。

justify-content:

这个属性决定了flex项目在某个方向上的对齐方式，如我们可以使用 justify-content: center 来将子元素居中，水平方向上的排列方式以及垂直方向上的排列方式都会受到这个属性的影响。
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
align-items:

这个属性决定了元素在交叉轴上的对齐方式。使用 align-items: center，可以将子元素的垂直方向上对齐方式设置为居中。
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

我们可以将这两个属性同时使用，实现水平居中：

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

示例代码

HTML 代码：

<div class="container">
  <div class="item">Hello World!</div>
</div>

CSS 代码：

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------------- -------
  ------------ -------
  ------- ------
  ----------------- -----
-
----- -
  ----------------- -----
  -------- -----
-

结论

CSS Flexbox 布局是一种灵活的布局方法，它可以轻松地实现水平居中对齐而无需借助传统的 CSS hack 技巧。掌握了它的用法，可以让你在开发响应式网站时效率更高，实现效果良好，深受用户喜爱。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6735cf620bc820c5825098e4