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

2023-12-09 22:13:03

<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，那就没用了。