未知宽高的图片水平垂直居中的几种方法

水深无声 2023-10-08 21:47 13阅读 0赞

## 最近在项目中遇到不固定宽高的图片要水平垂直居中的情况，发现垂直居中存在兼容性问题，下面收集了一些方法，可根据需要权衡使用。 ##

###  ###

### 1. 背景法(兼容性好，简单，但不利于动态导入的图片) ###

html：
    <div class="wrap"></div>
    
    css：
    .wrap{
        width:300px;
        height:200px;
        background: url(../img/test.jpg) center center no-repeat;
    }

### 2. 图片外面用个p标签，通过设置line-height使图片垂直居中(兼容性较好) ###

HTML：
    <div class="wrap">
        <img src="./img/test.jpg">
    </div>
    
    CSS：
    .wrap{
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        text-align: center;
    }
    .wrap p{
        width: 300px;
        height: 300px;
        line-height: 300px;
    }
    .wrap p img{
        *margin-top:expression((300 - this.height )/2);
        vertical-align: middle;
    }

### 3. 利用display:table-cell(不兼容IE6、7)(可用) ###

html:
    <div class="wrap">
        <img src="./img/test.jpg">
    </div>
    
    css:
    .wrap{
        width: 300px;
        height: 200px;
        border: 1px dashed #ccc;
        display: table-cell; 
        vertical-align: middle;
        text-align: center;
    }

### 4. 添加table标签(兼容性好，但是冗余标签比较多) ###

html:
    <div class="wrap">
        <table>
            <tr>
                <td align="center"><img src="./img/test.jpg"/></td>
            </tr>
        </table>
    </div>
    
    css:
    .wrap{
        width: 300px;
        height: 200px;
        border: 1px dashed #ccc;
        text-align: center;
    }
    .wrap table{
        width: 300px;
        height: 200px;
    }