css 使图片水平垂直居中

今天药忘吃喽~ 2021-06-26 16:06 498阅读 0赞

## 1.利用`display:table-cell`，具体代码如下： ##

`html`代码如下：

<div class="img_wrap">
    　　[外链图片转存失败(img-2qfoLWkj-1562163602279)(https://mp.csdn.net/mdeditor/wgs.jpg)]
    </div>

`css`代码如下：

.img_wrap{ 
        width: 400px;
        height: 300px;
        border: 1px dashed #ccc;
        display: table-cell; //主要是这个属性
        vertical-align: middle;
        text-align: center;
    }

效果如下：  
![在这里插入图片描述][20190703223129382.png]

## 2.采用背景法： ##

html代码如下：

css代码如下：

.img_wrap{ 
        width: 400px;
        height: 300px;
        border: 1px dashed #ccc;
        background: url(wgs.jpg) no-repeat center center;
    }

效果如下图：  
![在这里插入图片描述][20190703223329554.png]  
3.图片外面用个`p`标签，通过设置`line-height`使图片垂直居中：

`html`代码如下：

<div class="img_wrap">
         <p>[外链图片转存失败(img-yHN1SX8z-1562163602284)(https://mp.csdn.net/mdeditor/wgs.jpg)]</p>
     </div>

`css`代码如下：

*{ margin: 0px;padding: 0px}
    .img_wrap{ 
        width: 400px;
        height: 300px;
        border: 1px dashed #ccc;
        text-align: center;}
    .img_wrap p{ 
        width:400px;
        height:300px;
        line-height:300px;  /* 行高等于高度 */
    }
    .img_wrap p img{ 
        *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
        vertical-align:middle;
        border:1px solid #ccc;
    }

效果图如下：  
![在这里插入图片描述][20190703223505880.png]

[20190703223129382.png]: /images/20210626/47a0b220d49e465995c62ec21ebc4a17.png
[20190703223329554.png]: /images/20210626/2b35712d0f4a45ba8c7effea6acfac8f.png
[20190703223505880.png]: /images/20210626/8547683853564f658716f9e28a62bda3.png