网页中图片居中的代码(网页设计图片居中的代码)

　　为了方便表述；设置几个变量；

　　var 1= 宽 >高；

　　var 2= 高 >宽；

　　var 3= 宽 =高；

　　如下图图片父元素设置固定宽高，图片元素宽100%；这种布局是变量为 1 和 3 的图片可以等比缩小显示完全，但是变量为 2的图片会被截取一部分显示。默认变量为 1 的图是贴近顶部显示的，而不是下图的居中显示；

　　下图居中显示的效果是在父元素设置了 display: table-cell; vertical-align: middle;

　　图片展示完整代码：

　　HTML代码：

　　<div class="image">

　　<ul>

　　<li>

　　<span>

　　<img src="" >

　　</span>

　　</li>

　　</ul>

　　</div>

　　CSS代码：

　　.image {

　　margin: 0.3rem 0.4rem 0 0.4rem;

　　width: 100%;

　　overflow: hidden;

　　}

　　.image ul{

　　overflow: hidden;

　　}

　　.image li {

　　float: left;

　　padding: 0 0.08rem 0.15rem 0;

　　width: 4.95rem;

　　height: 4.95rem;

　　}

　　.image img {

　　width: 100%;

　　border: 0;

　　}

　　.image span{

　　display: table-cell;

　　vertical-align: middle;

　　width: 4.95rem; height: 4.95rem;

　　}

　　下图的布局效果是利用background-image属性显示，去掉img标签，特点是图片显示填满父元素空间，对于变量 1 和 3的图片只显示一部分。

　　完整代码如下：

　　HTML代码：

　　<div class="image">

　　<ul>

　　<li><span></span></li>

　　</ul>

　　</div>

　　CSS代码

　　.image span{

　　width: 4.95rem;

　　height: 4.95rem;

　　background-image: url();

　　background-position: center;

　　background-size: cover;

　　background-repeat: no-repeat;

　　}

　　当然这是前端在处理图片的展现方式，也可以后端按照约定的显示方式把图片处理好，前端做请求即可；

　　欢迎留言你的处理方式