CSS 图片垂直居中的解决办法

文章参考

1. 让html img图片垂直居中的三种方法

flex的align-items: center;

<div class="duty-header__label">
  <span class="img">
	<img src="../../../assets/images/workbench/today_duty_icon.png" alt="" />
  span>
  <span class="title">今日值班span>
  <span class="column">span>
div>
<style>
.img{
  display: inline-block;
  height: 48px;
  display: flex;
  align-items: center;
  img {
	display: inline-block;
	width: 32px;
	height: 32px;
  }
}
style>

1. span 的高度是 48px，大于图片 32px 高度
2. 利用align-items: center;属性，垂直居中

display: table-cell;的vertical-align: middle;

<span style="display: table; height:48px; width:48px;">
  <span class="img">
    <img src="../../../assets/images/workbench/today_duty_icon.png" alt="" />
  span>
span>
<style>
.img{
  display: inline-block;
  height: 48px;
  display: table-cell;
  img {
	vertical-align: middle;
	width: 32px;
	height: 32px;
  }
}
style>

1. 设置最外层控件为 display: table
2. 包裹图片的控件为 display: table-cell
3. 设置图片为 vertical-align: middle;

position: 50%和margin-top: -16px;（推荐）

<span class="img">
  <img src="../../../assets/images/workbench/today_duty_icon.png" alt="" />
span>

<style>style>
.img{
  position: relative;
  height: 48px;
  width: 48px;
  img {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	width: 32px;
	height: 32px;
  }
}

1. 设置图片的容器高度为48px, 并且为 relative 定位
2. 图片使用 absolute 定位， top 为50%， 则图片的顶部是在 如容器的 中间横线
3. 设置图片的 margin-top: -16px; 16px即为图片高度的一半，就相当于图片居中对齐了

这种定位方式需要了解图片的高度