在前端开发中，实现页面的布局是非常重要的一环。而 CSS Flexbox 是一种非常强大的布局方式，可以轻松实现水平居中和垂直居中。本文将详细介绍如何使用 CSS Flexbox 实现水平居中和垂直居中，并提供示例代码供读者学习参考。
什么是 CSS Flexbox？
CSS Flexbox 是一种布局方式，可以让容器内的子元素在水平和垂直方向上自由排列。Flexbox 布局是一种基于 “弹性盒子” 模型的布局方式，它可以让容器内的子元素自适应容器的大小，以达到最佳的布局效果。
如何使用 CSS Flexbox 实现水平居中？
要实现水平居中，我们可以使用以下 CSS 样式：
.container {
display: flex;
justify-content: center;
align-items: center;
}这里我们使用了 display: flex 将容器设置为弹性盒子，然后使用 justify-content: center 和 align-items: center 将子元素在水平和垂直方向上居中。以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- --------------
-------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
---- -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- ------------------
---- ------------------
------
-------
-------在上面的示例代码中，我们将容器的高度设置为 100vh，这样可以让容器占据整个视口的高度。然后我们给子元素设置了一个宽度和高度，并设置了一个背景颜色，以便更好地观察布局效果。最后我们将子元素放置在容器内，即可实现水平居中。
如何使用 CSS Flexbox 实现垂直居中？
要实现垂直居中，我们可以使用以下 CSS 样式：
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}这里我们使用了 flex-direction: column 将子元素在垂直方向上排列。然后使用 justify-content: center 和 align-items: center 将子元素在水平和垂直方向上居中。以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- --------------
-------
---------- -
-------- -----
---------------- -------
------------ -------
--------------- -------
------- ------
-
---- -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- ------------------
---- ------------------
------
-------
-------在上面的示例代码中，我们将容器的高度设置为 100vh，这样可以让容器占据整个视口的高度。然后我们给子元素设置了一个宽度和高度，并设置了一个背景颜色，以便更好地观察布局效果。最后我们将子元素放置在容器内，即可实现垂直居中。
总结
CSS Flexbox 是一种非常强大的布局方式，可以轻松实现水平居中和垂直居中。在实际开发中，我们可以使用上述 CSS 样式实现布局，并根据实际需求进行调整。希望本文对读者有所帮助，也欢迎读者在评论区留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f466362b3ccec22fcbe84c