第一种方法:
html
<div class="title">
<img src="img/t19.jpg" />
</div>
css
.title {
display: flex;
justify-content: center;
align-items: center;
}
.title img {
width: 35%;
}
第二种方法:
html
<div class="title">
<img src="img/t19.jpg" />
</div>
css
.title {
height: 500px;
font-size: 18px;
position: relative; //为父级元素设置相对定位
}
.title img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
第三种方法:
html
<div class="title">
<img src="img/t19.jpg" />
</div>
css
.title {
width: 200px;
height: 200px;
vertical-align: middle;
display: table-cell;
text-align: center;
}