图片在div垂直水平居中兼容解决方案

作者: 圆梦人生 | 来源:发表于2016-12-08 13:55 被阅读45次

图片在div垂直水平居中兼容解决方案
CSS水平垂直居中总结
CSS居中大全(带截图)
[2020-08-10]css3中的常用几种布局
水平垂直居中的实现方法
html+css，让div水平垂直居中的几种方式
div垂直居中的几种方法
CSS居中
css div垂直居中
动态设置div css属性

图片在div垂直水平居中兼容解决方案：
案例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>图片在div垂直居中</title>
        <!-- 
            @author：sm
            @email：sm0210@qq.com
            @desc：图片在div垂直居中
         -->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            /*
                
            */
            .imageInfo {
                border: 1px solid red;
                width: 400px;
                height: 400px;
                margin: 0 auto;
                overflow: hidden;
                text-align: center;
                
                display: block;
                vertical-align: middle;
            }
            .imageInfo * {
                vertical-align: middle;
            }
            .imageInfo span {
                display: inline-block;
                height: 100%;
                width: 1px;
            }
        </style>
        <!--[if lt IE 8]>
        <style>
            .wraptocenter span {
                display: inline-block;
                height: 100%;
            }
        </style>
        <![endif]-->
    </head>
    <body>
        <div class="imageInfo">
            <span></span>![](images/1.jpg)
        </div>
        
    </body>
    <!--  -->
</html>

效果：