在前端开发中，图片垂直居中是一个常见的问题。CSS Reset 是一种消除浏览器默认样式的技术，它可以帮助我们解决这个问题，让我们的图片在垂直方向上完美居中。本文将详细介绍如何使用 CSS Reset 来解决图片垂直居中的问题，并提供示例代码。
什么是 CSS Reset
CSS Reset 是一种消除浏览器默认样式的技术。浏览器有各种默认的样式，例如：页面元素的 margin、padding、font-size 等等。这些默认样式会造成一些问题，例如：不同浏览器的渲染效果不同、难以设置一致的样式等等。通过使用 CSS Reset 技术，我们可以消除这些默认样式，使得浏览器不再具有任何样式，我们可以自由设置我们需要的样式。
在 CSS Reset 技术中，有一种非常常见的方式就是使用 box-sizing: border-box。这种方式是通过改变盒模型的属性来达到消除默认样式的效果。在设置 box-sizing: border-box 之后，我们可以把所有的 padding、border、margin 都设置为 0，从而消除所有的默认样式。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}在使用 CSS Reset 技术之后，我们可以通过以下几种方式来解决图片垂直居中的问题。
1. 使用 line-height 属性
我们可以通过设置行高来实现图片的垂直居中。假设我们有一个容器 div，这个容器 div 的高度为 100px，现在我们要让里面的图片垂直居中。我们可以设置 div 的 line-height 属性为 100px，这样里面的图片就可以垂直居中了。
-- -------------------- ---- -------
---- ------------------
---- ------------- -------- --
------
-------
---------- -
------- ------
------------ ------
----------- ------- -- ---- --
-
--- -
--------------- ------- -- ---- --
-
--------注意，在使用 line-height 属性时，图片的 vertical-align 属性一定要设置为 middle。
2. 使用 display: flex
我们也可以使用 flex 布局来实现图片的垂直居中。我们可以把容器 div 的 display 属性设置为 flex，然后在子元素中使用 align-items 和 justify-content 属性来实现图片的垂直居中和水平居中。
-- -------------------- ---- -------
---- ------------------
---- ------------- -------- --
------
-------
---------- -
-------- -----
------------ ------- -- ---- --
---------------- ------- -- ---- --
------- ------
-
--------3. 使用 position
我们也可以使用 position 属性来实现图片的垂直居中。我们可以把图片的 position 属性设置为 absolute，然后使用 top 和 bottom 属性来实现垂直居中。
-- -------------------- ---- -------
---- ------------------
---- ------------- -------- --
------
-------
---------- -
--------- ---------
------- ------
-
--- -
--------- ---------
---- ----
---------- ----------------- -- ---- --
----- -- -- ---- --
------ -- -- ---- --
------- ----- -- ---- --
-
--------总结
CSS Reset 技术可以消除浏览器默认样式，避免出现一些不必要的问题。在使用 CSS Reset 技术之后，我们可以通过行高、flex 布局、position 等方式来实现图片的垂直居中。每种方式都有其自己的优缺点，我们可以根据实际情况来选择使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64769c65968c7c53b0346967