css图片居中,通过纯css实现图片居中的多种实现方法

时间: 2017-11-02阅读: 485标签: 居中

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结:

html结构:

<div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">
	<img src="default.jpg" width="400" height="300"/>
</div>

实现img位于外层div的居中显示,网上有很多在img外层嵌各式各样的span、div、li等等,以便于使用 text-align来进行居中,当然我们不推荐嵌套多层。

方法一:

.demo img{
	display: block;
	margin:150px auto;
}

思路:<img>标签是属于内联元素,内联元素是不支持 Margin 属性,通过 Display 属性将img强制为块元素的方式显示,便可在图文混排中使得图片可以居中。  

方法二:

.demo{
	text-align: center;
}
.demo img{
	margin-top:150px;
}

思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。  

方法三:

.demo img{
	padding:150px 200px;
}

思路: 只用padding属性,通过计算求得居中

 方式四:

.demo{
	display:table-cell; text-align:center; vertical-align:middle;
}
.demo img{
	vertical-align: middle;
}

思路:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,使用它可以让大小不固定元素垂直居中。只是它比上面方法优势。

方法五:

.demo{
	position: relative;
}
.demo img{
	position: absolute;top:150px;left:200px;
}

思路:通过相对,绝对定义,计算偏移量实现居中

方法六:

.demo{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

思路:实现css6的flex属性,很简单的实现了居中显示,但是推荐使用于web App,低版本浏览器存在一定兼容问题,好处和方法五一样。

方法七:

嘿嘿,方法还有很多,留点给大家留言发表哦..................