一. 弹性布局
<div class="header">
<div class="img">
<img src="../img/tupu.svg">
</div>
</div>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.header{
width: 1200px;
height: 80px;
margin: 0 auto;
background: #6F747A;
}
.header .img{
height: 100%;
display: flex;
align-items: center;
}
.header img{
width: 156px;
height: 20px;
}
二.绝对定位
<div class="header">
<div class="img">
<img src="../img/tupu.svg">
</div>
</div>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.header{
width: 1200px;
height: 80px;
margin: 0 auto;
background: #6F747A;
position: relative;
}
.header img{
width: 156px;
height: 20px;
position: absolute;
left: 0;
top: 50%;
/* margin-top: -10%; */
transform: translateY(-50%);
}
