代码示例为微信小程序的开发

WXML

<view class="outer">
    <text class="innerText">单行文本</text>
    <!-- <text class="innerMoreText">多行文字多行文字多行文字多行文字多行文字</text> -->
    <!-- <image class="innerImage" src="../../images/tape.png"></image> -->
</view>

外部元素定高

WXSS

.outer {
  height: 200rpx;
}

行内元素

1.单行文本：line-height

.outer .innerText {
  line-height: 200rpx;
}

2.多行文本：display: table 和 display: table-cell

.outer {
  display: table;
}
.outer .innerMoreText {
  display: table-cell;
  vertical-align: middle;
}

块级元素

WXSS

.outer .innerImage {
  width: 60rpx;
  height: 60rpx;
}

单一图片：position：absolute 、top 和 margin-top

.outer {
  position: relative;
}
.outer .innerImage {
  position: absolute;
  top: 50%;
  margin-top: -30rpx;
}

单一图片：position：absolute 和 margin：auto (水平垂直居中)

.outer {
  position: relative;
}
.outer .innerImage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

单一图片：position 和 transform

.outer {
  position: relative;
}
.outer .innerImage {
  position: absolute; // relative定位也可
  top: 50%;
  transform: translateY(-50%);  // 2D转换 沿Y平移
}

单一图片：display: table-cell 和vertical-align: middle

// 前提是把.outer放在一个block容器内
.outer {
  display: table-cell;
  vertical-align: middle;
}
.outer .innerImage {
  vertical-align: middle;
}

单一图片：flexbox布局

// 内部. innerImage不需要做其他处理
.outer {
  display: flex;
  align-items: center;
}

文字图片同行垂直居中

line-height 和 vertical-align

.outer {
  height: 200rpx;
  line-height: 200rpx;
}
.outer .innerText {
  vertical-align: middle;
}
.outer .innerImage {
  vertical-align: middle;
}

flexbox布局

// 内部元素不需要做处理 但是内部元素float属性失效
.outer {
  height: 200rpx;
  display: flex;
  align-items: center;
}

外部元素不定高

行内元素（文本）和块级元素（图片）同行居中：display: inline-block 和 display: inline-block

// .outer高度被图片高度自动撑开
.outer .innerText {
  display: inline-block;
  display: inline-block;
}
.outer .innerImage {
  width: 60rpx;
  height: 60rpx;
  display: inline-block;
  vertical-align: middle;
}

找到新的方案会继续更新哦～