在前端开发中，经常会遇到需要将图片水平垂直居中的情况。传统的方法是使用绝对定位和 margin，但是这种方法需要手动计算位置，不够灵活，而且对于不同尺寸的图片需要重新计算位置。在这里，我们将介绍使用 Flexbox 实现图片水平垂直居中的方法。
Flexbox 简介
Flexbox 是一种 CSS 布局模式，可以轻松地实现弹性布局，使得元素可以自适应不同的屏幕大小和设备。Flexbox 是一种强大而灵活的布局方式，可以大大简化布局代码，并提高代码的可读性和可维护性。
使用 Flexbox 实现图片水平垂直居中
要实现图片水平垂直居中，我们需要将图片包含在一个容器中，并使用 Flexbox 布局来设置容器的对齐方式和尺寸。以下是实现的步骤：
步骤 1：创建一个容器
首先，我们需要创建一个容器，将图片包含在其中。我们可以使用 div 元素来创建容器，并设置容器的样式：
---------- - -------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ----- -
在上面的代码中，我们使用了 display: flex 属性来启用 Flexbox 布局，并使用 justify-content 和 align-items 属性来设置容器的水平和垂直对齐方式。我们将这两个属性都设置为 center，这样容器就会在水平和垂直方向上居中对齐。
步骤 2：添加图片到容器中
接下来，我们需要将图片添加到容器中。我们可以使用 img 元素来添加图片，并设置图片的样式：
---------- --- - ---------- ----- ----------- ----- -
在上面的代码中，我们使用了 max-width 和 max-height 属性来设置图片的最大宽度和最大高度，以确保图片不会超出容器的范围。
步骤 3：设置容器的尺寸
最后，我们需要设置容器的尺寸，以确保容器和图片都可以水平垂直居中。我们可以使用以下代码来设置容器的尺寸：
----- ---- - ------- ----- - ---------- - ------ ----- ------- ----- -
在上面的代码中，我们使用了 height: 100% 属性来设置 html 和 body 元素的高度，以确保容器可以占据整个屏幕的空间。然后，我们使用 width: 100% 和 height: 100% 属性来设置容器的宽度和高度，以确保容器和图片都可以水平垂直居中。
示例代码
以下是完整的示例代码，可供参考：
--------- -----
------
------
-------------- ----- -----------------
-------
----- ---- -
------- -----
------- --
-------- --
-
---------- -
-------- -----
---------------- -------
------------ -------
------ -----
------- -----
-
---------- --- -
---------- -----
----------- -----
-
--------
-------
------
---- ------------------
---- ----------------------------------- ------------ ----- -----------
------
-------
-------结论
使用 Flexbox 实现图片水平垂直居中是一种简单而有效的方法，可以大大简化布局代码，并提高代码的可读性和可维护性。希望本文可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673e862f90e7ed93bee38668