让同一行元素垂直方向对齐的几种方法

方法1.  Flex弹性布局：

.container { // 父级容器
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

这种方法的优点是简单快捷，缺点是不适合有动画的场景。因为flex的自动内容填充，会破坏动画效果需要的绝对定位。

方法2. 绝对定位（不推荐）：

.parent { // 父级容器
  position: relative;
  height: ${heisht}px; /* 父元素的高度 */
}
 
.child { //需要垂直对齐的子元素
  position: absolute;
  top: 50%; 
  transform: translateY(-50%); 
}

这个方法有个致命的缺点： 采用绝对定位以后，元素脱离了文档流，也就不会占据原有的位置，

所以，行内的每一个元素的定位参照点都是父级元素的左上角原点，这样带来的后果就是：

每一个元素都需要手动计算从父级元素最左边开始的margin-left, 否则元素就会都堆叠在最左边的位置，这样就很繁琐，而且也失去了float: left自动占位的优势。

方法3： 对子元素使用 transform: translateY(+xx%); (xx表示移动的比例)

 这种方法不会影响动画效果，也不需要绝对定位，唯一就是需要调整translateY的偏移值。

#nav .logo { 
  /* 注意： div必须设置宽高，否则背景色设置不会生效！ */
  width: 56px;
  height: 56px;
  background-color: #ff6700;
  border-radius: 5px; 
  transform: translateY(+40%);
  /* overflow: hidden是隐藏动画图标的关键  */
  overflow: hidden;
}

方法4： 对于全部是行内元素的情况，可以使用line-height= height，来使得文字垂直居中

. element {
/* 因为line-height会让内容自动撑开元素高度，
当height和line-height相等时，文字就能垂直居中 */
 height: 100px;
 line-height: 100px;
   
}

因为line-height会让内容自动撑开元素高度，
所以当height和line-height相等时，文字就能垂直居中

方法5. 对img标签使用vertical-align: middle使img图片和相邻文字垂直方向对齐

// html结构：
 
   <a :href="#">
      <img :src="xxxx">
      <span>xxx文字内容</span>
   </a>
 
// css代码：
 
   img{
       width: xxpx;
       height: xxpx;
       vertical-align: middle;       
      }