css图片垂直居中

实现CSS图片垂直居中的方法有很多种，下面将详细介绍其中的几种常用方法。

1. 使用Flexbox布局

Flexbox是现代CSS的一个布局模块，它提供了一种简单而强大的方式来实现元素的对齐和居中。要实现图片垂直居中，我们可以使用以下代码：

```

.container {

display: flex;

justify-content: center;

align-items: center;

}

```

以上代码中，`.container` 是包含图片的容器元素，通过设置其为flex布局，并使用 `justify-content` 和 `align-items` 属性将图片水平和垂直居中。

2. 使用*定位和负边距

另一种方法是使用*定位将图片定位到父容器的中间位置。这种方法需要父容器设置为相对定位，然后使用负边距将图片向上移动一半的高度。

```

.container {

position: relative;

}

.image {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%

-50%);

}

```

以上代码中，`.container` 是包含图片的容器元素，通过设置其为相对定位。`.image` 是图片元素，通过设置其为*定位，然后使用 `transform` 属性将图片平移转换到父容器中间位置。

3. 使用表格布局

表格布局是CSS中另一种实现元素对齐和居中的方法。我们可以使用 `display: table` 将容器设置为表格布局，然后使用 `display: table-cell` 或 `vertical-align` 属性将图片垂直居中。

```

.container {

display: table;

width: *;

height: *;

}

.image {

display: table-cell;

vertical-align: middle;

text-align: center;

}

```

以上代码中，`.container` 是包含图片的容器元素，通过设置其为表格布局。`.image` 是图片元素，通过设置其为表格单元格，然后使用 `vertical-align` 属性将图片垂直居中。

总结：

以上介绍了三种常用的方法来实现CSS图片垂直居中，分别是使用Flexbox布局、*定位和负边距、表格布局。每种方法都有其适用的场景，您可以根据自己的需求选择合适的方法来实现图片垂直居中。