地鼠营销

```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ```

上面的代码中，`justify-content: center;`将容器内的内容水平居中，`align-items: center;`将容器内的内容垂直居中。这样，无论图片的高度和宽度如何，都可以实现图片的垂直居中。

另一种实现图片垂直居中的方法是使用`position: absolute;`和`transform: translateY(-50%);`。具体代码如下：

```css .container { position: relative; }

.container img { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); } ```

上面的代码中，我们将容器设置为相对定位，然后将图片设置为绝对定位，并通过`top: 50%;`和`left: 50%;`将图片定位在容器的中心位置。通过`transform: translateY(-50%);`将图片向上移动50%的高度，实现图片的垂直居中。

除了上述方法，我们还可以使用`display: table;`和`vertical-align: middle;`来实现图片的垂直居中。具体代码如下：

```css .container { display: table; width: 100%; height: 100%; }

.container img { display: table-cell; vertical-align: middle; } ```

上面的代码中，我们将容器设置为表格布局，并将容器的宽度和高度设置为100%。然后，将图片设置为表格单元格，并通过`vertical-align: middle;`将图片垂直居中。

总结来说，实现图片的垂直居中可以使用CSS3的弹性盒子、绝对定位和表格布局等特性和技巧。这些方法都可以帮助我们轻松实现图片的垂直居中，无论图片的高度和宽度如何，都可以达到预期的效果。希望本文对你有所帮助！

本文标签： web 图片垂直居中css3