一个未知宽高的元素在div中垂直水平居中

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个未知宽高的元素在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，那就没用了。

以上是关于一个未知宽高的元素在div中垂直水平居中的主要内容，如果未能解决你的问题，请参考以下文章