css 让img图片在div标签垂直居中

使用 flex 布局

<div class="login">
  <img class="login-img" src="images/logo.png"/>
  <span class="login-wel">早上好，欢迎登录 ~</span>
</div> 

.login-top {
  display: flex;
  align-items: center;
  .login-img {
    width: 34px;
    height: 40px;
  }
  .login-wel {
    font-size: 28px;
    margin-left: 8px;
    color: #ffffff;
    font-weight: 400;
  }
}

操作 display: table 完成img图片垂直居中

<div class="tablebox">
	<div id="imgbox">
		<img src="1.jpg" alt="">
	</div>
</div>

.tablebox {width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

用绝对定位完成垂直居中

<div class="posdiv">
	<img src="1.jpg" alt="">
</div>

.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;} // transform:translateY(-50%);

Css 如何快速让 button 按钮标签水平居中
Css 解决 image 标签间距问题
css 解决 vertical-align: middle 失效问题