你的line-height解决了垂直居中吗

QA1： 元素的高度是谁决定的？

一个元素的高度，在没有指定height的情况下， 多高是由它下面的 inline 元素的line-height决定的；

例如 图片 img, label, span, i 等元素的line-height决定

上代码

<div class="empy">
    <i>&nbsp;</i>
</div>

css

.empy {
  width: 100%;
  /* 没有指定高度 */
  background-color: red;
  margin-bottom: 20px;
}
/*行内元素， 就给了一个line-height, 里面的内容就是一个空格*/
.empy i {
  line-height: 20px;
}

高度有了吧， 有图有真相

QA2：你想让单行文字垂直居中

布局

<div class="single-text-middle">单行文字垂直居中, 就添加一个line-height即可</div>

样式

.single-text-middle {
  line-height: 30px;
  border: 1px dashed #5a5a5a;
  margin: 20px 0;
}

QA3: 你想让多行文字垂直居中

布局

<div class="multi-text-middle">
    <span>
      多行文字垂直居中
      <br>
      第二行文字， 模拟多行，加了一个 br换行
    </span>
    <i>&nbsp;</i>
</div>

样式

.multi-text-middle {
  /* 这里连高度都没指定，注意到没 */
  /* 这个就是决定下面元素垂直居中的因素 */
  line-height:150px;
  margin: 20px 0;
  border: 1px dashed #5a5a5a;
  font-size: 0;
}
.multi-text-middle span {
  display:-moz-inline-stack; 
  display:inline-block;
  /* 12 * 1.4 = 16.8- 这是文字的行高，不是决定他垂直居中的因素 */
  line-height:1.4em; 
  vertical-align:middle;
  font-size: 12px;
}
/* 这里用一个空的 标签，其实就是一个空格，将高度撑起来了 */
.multi-text-middle i {
  width: 0;
  display:-moz-inline-stack; 
  display:inline-block; 
  vertical-align:middle; 
  font-size:0;
}

不要什么兼容性的话， 就删除 display:-moz-inline-stack;

为什么要加那个 i 空标签， 不加行不行？ 删除的话，使用截图工具，上下对比一下高度，就会发现，其实文字是没有垂直居中的，上面比下面多一些，很细微，肉眼看不出

QA4: 我想让图片水平垂直居中

样式

<style>
.box {
  width: 500px;
  /* 这里完全没加高度 */
  line-height: 500px;
  background-color: red;
  /* 子元素水平居中 */
  text-align: center;
}

.box .son {
  display: inline-block;
  /* 限定一个合适的宽度，高度，如果图片比较小，你完全可以不限制 */
  width: 200px;
  height: 200px;
  /* 垂直居中 */
  vertical-align: middle;
}
</style>

<div class="box">
    <!-- <label for="">一段文字</label> -->
    <img class="son" src="https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1595403163&t=4bed0971d1c25e7fda34b415079489e6" alt="">
</div>

效果