CSSは、子要素の水平方向と垂直方向の中央揃えを制御します（2つ）

（1）とは異なり、よく見てください、違いは.time-dateにあります

最初に最終レンダリングを見てください

説明：ヘッダーは外側のコンテナーで、画像は背景です。
要件：
（1）コンテナーの中央、つまり背景画像の中央に
時間データを設定します。（2）2つのテキストデータと時間を設定します。中央に。時間データも中央に配置されます。

 <view class="header">
    <image src="../../static/recommendSong/recommendSong.jpg"></image>
    <view class="time-date">
      <text class="date">{
   
   {date}}</text>
      <text class="time">{
   
   {time}}</text>
    </view>
  </view>

.header{
    
    
  position: relative;
  height: 300rpx;
}
.header image{
    
    
  height: 300rpx;
  width: 100%;
}
/* 设置日期剧中显示 */
.time-date{
    
    
  /* 设置在父元素居中 */
  position: absolute;
  height: 170rpx;
  width: 400rpx;
  border: red solid 1rpx;
  top:50%;
  left:50%;
  margin-top: -85rpx;
  margin-left: -200rpx;
  /* 设置里面内容居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time-date text{
    
    
  height: 85rpx;
  line-height: 85rpx;
}

CSSコードの説明：
1。最初にコンテナの中央に日時を設定し、親要素の相対位置をオンにし、子要素の絶対位置をオンにし、子要素の幅と高さを設定し、上下のオフセットを親要素の幅のパーセントに設定します。50は下の図の効果です。

オフセットは要素の左上隅によって決定されるため、ボックスを高さの半分だけ引き上げると、通常、ボックスを左に引いたときに幅が中央に配置されます。

2.次に、テキストを日時の中央に配置します。最初に2行のテキストがあります。高さを均等に分割してから、それぞれを中央に配置します。フレックスレイアウトを使用してフレックスボックスの方向を変更して列を整列させてから、align-itemプロパティを使用してコンテンツの水平方向の中心を設定します。最後に、行の高さとテキストの高さを別々に設定します。目的は、テキストを垂直方向の中央に配置することです。

間違えた場合は、私を批判して訂正してください。コメントを歓迎します。