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

时间 2019-11-10

标签一个未知高的元素 div 垂直水平居中栏目 CSS 繁體版

原文原文链接

<body>
    <div id="#div1">
        <img src="img1.png"></img>
    </div>
</body>

那么，如何让img元素在div中居中对齐呢？css

第一种方法

第一步：在img标签后面添加一个元素，好比说添加一个span元素css3

<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转换为行内块元素。flex

这种方法就是利用css3的新特性了。spa

#div1 {
    display:flex;
    vertical-align:middle;
    align-items:middle
}

这种方法的缺点就是，若是浏览器不支持css3，那就没用了。code