CSS如何设置img属性让图片水平垂直居中

图片的居中显示css有很多方法，但在很多情况下有的方法无效，无意发现这个系统的官方处理图片水平垂直居中的css三种写法，喜欢的朋友可以收藏下哦！

---

 1.利用display:table-cell属性

具体代码如下：

<!DOCTYPE html>
　<html>
　　<head>
　　<meta charset="utf-8" />
　　<title></title>
　　　<style type="text/css">
　　　　.img_center{
　　　　　width: 500px;
　　　　　height: 300px;
　　　　　border: 1px #ccc dashed;
　　　　　display: table-cell; /*主要作用就是这个属性*/
　　　　　vertical-align: middle;
　　　　　text-align: center;
　　　　}
　　　</style>
　　</head>
　　<body>
　　　<div class="img_center">
　　　　<img src="img/name.jpg"/>
　　　</div>
　　</body>
</html>

效果如下：

 

2.采用背景法设置

具体代码如下：

<!DOCTYPE html>
　<html>
　　<head>
　　<meta charset="utf-8" />
　　<title></title>
　　<style type="text/css">
　　　.img_center{
　　　　width: 500px;
　　　　height: 300px;
　　　　border: 1px #ccc dashed;
　　　　background: url(img/name.jpg) no-repeat center center;
　　　}
　　</style>
　</head>
　<body>
　　<div class="img_center"></div>
　</body>
</html>

效果如下：

 

３.通过设置line-height使图片垂直居中

具体代码如下：

<!DOCTYPE html>
　<html>
　　<head>
　　<meta charset="utf-8" />
　　<title></title>
　　<style type="text/css">
 　　　.img_center{
 　　　width: 500px;
　　　 height: 300px;
 　　　border: 1px #ccc dashed;
 　　　text-align: center;
 　　　}
　　　 .img_center p{
 　　　width: 500px;
 　　　height: 300px;
 　　　line-height: 300px; /* 行高等同于高度 */
 　　　}
 　　　.img_center p img{
 　　　*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
　　　 vertical-align:middle;
 　　　border:1px solid #ccc;
 　　　}
 　　</style>
　　</head>
　　<body>
 　　　<div class="img_center">
 　　　　<p><img src="img/name.jpg"/></p>
 　　　</div>
　　</body>
</html>

效果如下：