css如何设置图片垂直居中

css如何设置图片垂直居中

css如何让标签自动垂直居中呢？让我们一起来看一看。

居中样式代码：

.img-center{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}

新建一个html文件，在这个html文件上创建一个标签，然后对这个标签设置图片路径，最后为这个标签添加一个类（案例中类为：img-center）

对img-center类设置样式。

1.设置positon定位为绝对定位，上下左右的距离都为：0；

2.设置这个类的外编辑为：auto。

代码：

.img-center{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 300px;}

保存html文件后，使用浏览器打开，即可看到图片自动居中。

所有代码。可以直接复制所有代码，粘贴后运行即可看到效果。

所有代码：