在前端开发中，居中元素是常见的需求。本文将介绍使用 CSS Flexbox 实现垂直和水平居中两个按钮的方法。
什么是 Flexbox？
Flexbox 是 CSS3 引入的一种布局模式，可用于更高效的方式放置、对齐和分布容器中的元素。它可以很方便的实现响应式设计，以适应不同的屏幕大小和设备类型。Flexbox有一个主轴和交叉轴，可以轻松地控制元素在容器内的对齐方式。
实现垂直和水平居中两个按钮
在介绍如何实现垂直和水平居中两个按钮之前，我们先创建一个 HTML 文件，并添加两个按钮：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- -----------------
-------
--- ------ -- ---- ---
--------
-------
------
------- -------------------- ------------
------- -------------------- -- -------------
-------
-------水平居中
要实现水平居中两个按钮，我们可以使用以下 CSS 样式：
body {
display: flex;
justify-content: center;
}这将设置 body 元素为 flex 容器，并将两个按钮放置在其主轴的中间。
垂直居中
现在，我们扩展上一个例子来实现垂直居中两个按钮。为了使其生效，我们需要添加一些额外的 CSS：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}这会将 align-items 属性设置为 center，将两个按钮放置在交叉轴的中心。为了使整个页面铺满浏览器，我们还需要设置容器的高度为 100vh。
针对不同屏幕尺寸的响应式设计
现在，我们已经完成了按钮的水平和垂直居中。但是，为了确保我们的布局在不同屏幕尺寸上都能正常工作，我们可以使用 CSS Media Queries 来调整样式。
例如，我们可以为移动设备添加以下样式：
@media (max-width: 600px) {
body {
flex-direction: column;
height: unset;
}
}这将在小屏幕设备上更改容器的方向为 column，并取消容器的高度限制。
结论
通过使用 CSS Flexbox，我们可以轻松地实现水平和垂直居中两个按钮，并为不同屏幕尺寸提供响应式设计。Flexbox 可以为开发人员在布局和对齐方面提供很多有用的功能和选项，有助于提高开发效率和提供更好的用户体验。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- -----------------
-------
---- -
-------- -----
---------------- -------
------------ -------
------- ------
-
------ ----------- ------ -
---- -
--------------- -------
------- ------
-
-
------- -
-------- ---- -----
-------------- ----
----------------- --------
------ --------
------------ -----
---------------- -----
------- -----
------- ----
-
--------
-------
------
------- -------------------- ------------
------- -------------------- -- -------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770a9e7e9a7045d0d7f9b8d