水平居中的办法：
1、img为内联元素，将img设置为block块元素，并设定其宽度和高度，然后margin：0 auto，图片在其父元素中将会水平居中；
2、直接在img所在的父元素中设置text-align：center，那么该img将会在它的父元素中处于水平居中位置；
竖直居中的办法：
1、在img标签前增加一个span元素，设置其为inline-block，高度和其父元素一致100%，设置vertical-align：middle，同时再设置img元素属性vertical-align：middle，就能实现图像居中显示了。
代码为：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{width:600px;height:600px;background:#f00;text-align: center;}
.main span{ height:100%; display:inline-block; vertical-align:middle; }
.main img{width:340px;vertical-align: middle;}
</style>
</head>
<body>
<div class="main">
<span></span>
<img src="http://i5.akjunshi.com/20160517/146345647387181.jpg">
</div>
</body>
</html>
2、图片能写到背景的话尽量写到背景里面，位置属性更容易控制一些。也能实现同样的效果。
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
