正文
一个未知宽高的元素在div中垂直水平居中
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<body>
<div id="#div1">
<img src="img1.png"></img>
</div>
</body>
那么，如何让img元素在div中居中对齐呢？
第一种方法
第一步：在img标签后面添加一个元素，比如说添加一个span元素
<body>
<div id="div1">
<img src="img1.png"></img><span></span>
</div>
</body>
第二步：为这几个元素设置样式
#div1 {
text-align:center;
}#div1 span {
display:inline-block;
vertical-align: middle;
}#div1 img {
vertical-align:middle;
}
好啦，完成以上操作，这个Img元素在div中就是垂直居中的了，这种方法的兼容性很好的，唯一的缺点就是需要在元素后面添加一个元素啦。注意，这个添加的元素最好是span元素，如果是div的话，在低版本ie下的话有问题。因为不支持div转换为行内块元素。
第二种方法
这种方法就是利用css3的新特性了。
#div1 {
display:flex;
vertical-align:middle;
align-items:middle
}
这种方法的缺点就是，如果浏览器不支持css3，那就没用了。
