Question

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

需要兼容各种浏览器
.img_a{display:table-cell;vertical-align:middle;text-align:center;overflow:hidden;width:310px;height:310px;background:url(../images/stripe-5px.gif) repeat;}
.img_a img{max-height:310px;max-width:310}

<a class="img_a" href="#" target="_blank"><img src="images/750x350-1.jpg"/></a>
例子用到的img图片宽度为750px,高度为350px
但是IE8出来的效果如下(.img_a的div宽度被撑开了)：

理想效果应该是如下：





Answer 1

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中1、.img-wrap 的 padding百分比值是相对于宽度的，这样我们就可以按照图片的比例来设置高度啦！height=0,padding-bottom=100% 正好是一个正方形（这里设置为60%）；设置相对定位是为了 能够使子元素 基于它设置宽高（这样padding的值会计算在内，不然子元素的高度设置百分比时只会是我们写的‘height: 0’）;

Answer 2

由于img是个特殊的内联元素，所以要将其设置为块级元素或设置定位才能让其居中显示。

img标签水平居中（方法一，设置为块级元素）：

<img style="display:block;margin:0 auto" src=""/>

img标签水平居中（方法二，设置定位）：

<img style="position:relative;left:50%;transform:translateX(-50%)" src=""/>

img标签垂直居中：

<img style="position:absolute;top:50%;transform:translateY(-50%)" src=""/>

img标签垂直水平居中：

<img style="position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)" src=""/>