css图片垂直居中

首先，我们来看看css图片水平居中的方法

1、利用margin: 0 auto实现图片水平居中

css图片水平居中代码：

.compute{
text-align: center; 
width: 500px; 
border: green solid 1px;
}
.compute img{
margin: 0 auto;
}
<div class="compute">
    <img alt=""src=""/>
</div>

2、利用文本的水平居中属性text-align: center实现图片水平居中

css图片水平居中代码：

.compute{
text-align: center; 
width: 500px; 
border: green solid 1px;
}
.compute img{
display: inline-block;
}
<div class="compute">
    <img alt=""src=""/>
</div>

我们来看看css图片垂直居中的实现方法

1、利用高==行高实现图片垂直居中

css图片垂直居中代码如下：

.compute{
text-align: center; 
width: 500px;
height:200px; 
line-height:200px;
border: green solid 1px;
}
.compute img{
display: inline-block;
vertical-align: middle;
}
<div class="compute">
    <img alt=""src=""/>
</div>

注意：此种方法需要注明高度才可以使用。

2、利用table实现图片垂直居中

css图片垂直居中代码如下：

.compute{
text-align: center; 
width: 500px;
height:200px; 
display: table;
border: green solid 1px;
}
.compute span{
display: inline-block;
vertical-align: middle;
}
.compute img{
display: inline-block;
}
<div class="compute">
  <span>
     <img alt=""src=""/>
  </span>
</div>

注意：此种方法是利用了table的垂直居中属性

说明：这里使用display: table;和display: table-cell;来模拟table，这种方法并不兼容IE6/IE7，IE67不支持display: table，如果你不需要支持IE67那就可以用

这种方法有一个缺点：当你设置了display: table;可能会改变你的原有布局

3、利用绝对定位实现图片垂直居中(好用)

.compute{
width: 500px;
height:200px; 
position: relative; 
border: green solid 1px;
}
.compute img{
width: 120px; 
height: 40px;
position: absolute; 
left:50%; 
top: 50%; 
margin-left: -60px;
margin-top: -20px;
}
<div class="compute">
    <img alt=""src=""/>
</div>

css图片垂直居中代码如下：