css图片垂直居中

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

1. 使用Flexbox布局

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

```

.container {

display: flex;

justify-content: center;

align-items: center;

}

```

2. 使用*定位和负边距

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

```

.container {

position: relative;

}

.image {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%

-50%);

}

```

3. 使用表格布局

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

```

.container {

display: table;

width: *;

height: *;

}

.image {

display: table-cell;

vertical-align: middle;

text-align: center;

}

```

总结：