居中：让图片在div中几种方式
2018-06-06 本文已影响111人
一Left一
方法一：vertical-align: middle;
先设置一个div包含一个a标签和img标签
<div>
<a href="https://www.jianshu.com/u/2f326b555fe5"></a>
<img src="image404.png" alt="">
</div>
让div在页面居中，此处用了用绝对定位position:absolute为了解决浏览器兼容问题，比如safari里面就会出现边缘间距空白
<style type="text/css">
div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
text-align:center;
}
div img{
border:0;
width:700px;
}
</style>
此处div加上一个vertical-align:middle能让图片垂直居中，结果一点效果也没有。但是加上text-align:center的话，可以让里面的img水平居中，但vertical-align却不能这样子用。
我的第一种做法是：可以在div里面加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical-align:middle样式，那么img就可以在div里面垂直居中了。
<head>
<meta charset="UTF-8">
<title>换肤效果</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100px;
background: yellow;
text-align: center;
vertical-align: middle;
}
div img{
height: 80px;
vertical-align: middle;
}
body{
background: url("images/hanguo1.jpg");
}
div span{
vertical-align: middle;
display: inline-block;
height: 100px;
}
</style>
</head>
<body>
<div>
<span></span>
<img src="images/gufen1.jpg" alt="">
<img src="images/gufen4_400x400.jpg" alt="">
<img src="images/gufen5.jpg" alt="">
<img src="images/gufen3.jpg" alt="">
<img src="images/gufen2.jpg" alt="">
<img src="images/hanguo2.jpg" alt="">
<img src="images/hanguo3.jpg" alt="">
<img src="images/纯阳.png" alt="">
<img src="images/hanguo4.jpg" alt="">
<img src="images/苍云.png" alt="">
</div>
</body>
这里我设置页面背景为图片平铺效果，效果如下：
图片.png
方法二：vertical-align：middle
vertical-align属性只对行内元素有效，对块内元素无效！将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle，也可以实现这样的效果。
方法三：line-height
设置行高line-height,但是要注意，与父元素的高度一致，要与div的高度一致，但是小图片会被拉伸，大图片设置行高不会使的图片变小，大图片设置img的高度即可。
方法四：子绝父相
未知宽高的图片可以这样写，但是下面代码只能设置单张图片，多张图片还可以做变动，比如通过浮动来定位其他图片等
div{
width: 100%;
height: 100px;
background: yellow;
position: relative;
}
div img{
height: 80px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
已知图片宽高的：通过计算可以获得，可以设置多张图片
div{
width: 500px;
height: 500px;
background: yellow;
position: relative;
}
div img{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left:-100px;
margin-top: -100px;
}
还有其他的方式，这里仅仅是用了css的一些方法
