div图片垂直居中 如何使div中图片垂直居中

要实现div中的图片垂直居中，我们可以采取以下三种方式：

方式一：使用flex布局

利用flex布局，我们可以很轻松地实现div中的图片垂直居中。

<style>
    .container {
        display: flex;
        align-items: center; /*指定垂直居中*/
        justify-content: center; /*指定水平居中*/
        height: 200px;
    }
</style>

<div class="container">
    <img src="image.png">
</div>

通过给包含图片的div加上display:flex属性，再指定algin-items:center即可让图片垂直居中。由于在图片容器中只有一个元素，通过flex布局将其水平和垂直居中，也就实现了整个div的水平和垂直居中。

方式二：使用line-height属性

当我们的图片是固定高度的时候，我们还可以采用line-height属性实现垂直居中。

<style>
    .container {
        line-height:200px; /*指定行高等于容器高度*/
        text-align: center; /*水平居中*/
    }
    .container img {
        vertical-align: middle; /*使图片与行对齐*/
    }
</style>

<div class="container">
    <img src="image.png">
</div>

由于该图片是200px高的，我们可以将其所在的容器的line-height属性设置为200px，然后再将其内部的图片通过vertical-align:middle属性与该行对齐。这样可以实现图片的垂直居中。

示例三：使用table

我们还可以使用table属性将图片居中

<style>
.container {
   height: 200px;
   display: table;
   width: 100%;
}
.container img {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}      
</style>
<div class="container">
  <img src="image.png" alt="图片描述">
</div>

我们首先给所在的容器div设置高度为200px，然后将其display属性设置为table，使其表现得和表格一样。之后将图片容器的display属性设置为table-cell，vertical-align设置为middle，以达到居中的效果。注意：在图片容器中设置text-align为center可以实现图片水平居中。

以上是三种实现div中图片垂直居中的方法，你可以根据特定的情况选择不同的方式。