div和图片垂直居中问题

来源：互联网发布：c语言void和int 编辑：程序博客网时间：2024/05/16 07:42

未知高度div垂直水平居中方法：

<div class="wrap">        <div class="test">sdfdsfdsf<br>sadsad</div>    </div>

1）.wrap {        width: 300px;        height: 300px;        text-align: center;        background: rgba(0, 0, 0, 0.5);    }    .wrap:after{    display:inline-block;    content: '';    vertical-align: middle;    height: 100%;    }    .test {        background: red;        display: inline-block;        vertical-align: middle;    }

2）

.wrap {        width: 300px;        height: 300px;position: relative;        background: rgba(0, 0, 0, 0.5);    }    .test{    position: absolute;    left:50%;    top:50%;    transform: translate(-50%,-50%);    background: red;    }

 3）.wrap {        width: 300px;        height: 300px;display: table-cell;        background: rgba(0, 0, 0, 0.5);        vertical-align: middle;        text-align: center;    }    .test{    display: inline-block;    background: red;    }

4）

.wrap {        width: 300px;        height: 300px;display: flex;align-items: center;justify-content: center;        background: rgba(0, 0, 0, 0.5);        vertical-align: middle;        text-align: center;    }    .test{    background: red;    }

图片垂直居中方法

<div class="wrap">        <img src="appicon.png" class="test">    </div>

.wrap{        width: 300px;          height: 160px;           background: rgba(0, 0, 0, 0.5);          text-align: center;      }    .wrap:after{        content: "";        height: 100%;        vertical-align: middle;        display: inline-block;    }    img{        vertical-align: middle;    }

阅读全文

1 0