css设置图片自动水平垂直居中
的有关信息介绍如下：
前端页面的开发常常需要让图片自动水平垂直居中，今天让我们一起来看一下在不知道图片的宽、高情况下如何设置让图片自动垂直水平居中呢？
css代码：
.img-center{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 300px;}
接下来将通过一个案例是实现图片自动垂直水平居中。
新建一个html文件。
在这个html代码页面上新建一个![]()
标签，然后对这个![]()
标签引入一个图片路径，最后创建一个class类。如图：
代码：
对class设置css样式。
在
标签后面新建一个<style>标签，然后在<style>标签里设置img-center这个类的样式为：</p><p>1.绝对定位，上下左右的距离为0；</p><p>2.外边框为自动。</p><p>代码：</p><p>.img-center{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</p><p>保存html文件后使用浏览器打开即可看到图片已经垂直水平居中了。</p><p>所有代码。可以直接把所有代码复制到新建的html文件上，保存后即可看到效果。（案例中使用的图片路径是自己电脑上的路径，粘贴时需要修改图片路径）。</p><p>所有代码：</p><p><!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片自动水平垂直居中 
Simone