在前端开发中，垂直居中对齐是一个常见的需求。在 Flexbox 布局中，我们可以轻松地实现垂直居中对齐。
Flexbox 布局简介
Flexbox 是一种用于布局的 CSS3 模块，它提供了一种灵活的方式来排列、对齐和分配空间，使我们能够更轻松地创建复杂的布局，同时避免了传统布局中的许多限制和问题。
实现垂直居中对齐的方法
在 Flexbox 布局中实现垂直居中对齐有两种主要方法：使用 align-items 和使用 align-self。
使用 align-items
在容器上设置 align-items 属性可以让容器内的项目垂直居中对齐。
.container {
display: flex;
align-items: center;
}上述代码将 .container 容器内的所有项目垂直居中对齐。可以在需要垂直居中对齐的容器上添加该属性。
使用 align-self
在项目上设置 align-self 属性可以让该项目在容器中垂直居中对齐。
.item {
align-self: center;
}上述代码将 .item 项目垂直居中对齐。可以在需要垂直居中对齐的项目上添加该属性。
示例代码
下面是一个实现 Flexbox 布局中垂直居中对齐的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------------
-------
-- ---- --
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
-- ---- --
----- -
----------------- --------
------ ------
------- ------
----------- -------
------------ ------
---------- -----
------------ -----
-------------- ----
----------- - - ---- ------- -- -- -----
----------- -------
-
--------
-------
------
---- ------------------
---- -------------------------
------
-------
-------代码中，容器使用了 align-items 和 justify-content 属性让项目水平、垂直居中对齐。项目使用了 align-self 属性让自己在容器中垂直居中对齐。最终效果如下：
总结
Flexbox 布局提供了非常灵活的布局方案，使得垂直居中对齐变得更加容易。我们可以通过 align-items 和 align-self 属性来实现垂直居中对齐。相信本文的介绍对你有所启发，让你更加熟练地使用 Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf03d7b5eee0b5256825df