[分享]css中如何设置图片垂直居中

在编写网页时，经常会发现需要将图片垂直居中，这是一个常见的布局问题。在CSS中，我们可以通过以下方法来实现图片垂直居中：1. 通过设置图片的显示方式为inlineblock来实现垂直居中。例如，在HT...

在编写网页时，经常会发现需要将图片垂直居中，这是一个常见的布局问题。在CSS中，我们可以通过以下方法来实现图片垂直居中：
1. 通过设置图片的显示方式为inline-block来实现垂直居中。
例如，在HTML代码中，我们可以这样写：

 <div>
        <img src="example.png" style="display:inline-block; vertical-align:middle;" />
    </div> 

上面的代码中，我们将图片包裹在一个div标签中，并将其显示方式设置为inline-block。同时，我们将图片设置为垂直对齐方式为middle，以实现垂直居中。
2. 通过使用Flexbox布局来实现图片垂直居中。
Flexbox是一种新的CSS布局方式，它可以非常简单地实现各种复杂的布局效果。在这里，我们可以使用Flexbox来实现图片的垂直居中。
例如，在HTML代码中，我们可以这样写：

 <div style="display:flex; align-items:center;">
        <img src="example.png" />
    </div> 

上面的代码中，我们将图片包裹在一个div标签中，并将其显示方式设置为flex。同时，我们将该div的纵向对齐方式设置为center，以实现图片的垂直居中效果。
需要注意的是，在使用Flexbox布局时，我们还需要将该div的高度设置为与屏幕等高，以确保图片能够完全垂直居中。这可以通过设置该div的height属性为100vh来实现。
总之，以上两种方法都是非常常用的CSS实现图片垂直居中的方式。大家可以根据自己的需要来选择其中的一种方法来实现相应的效果。