フレキシブルボックスの縦横センタリングをCSSで実現する方法

フレックスボックスを水平方向と垂直方向の中央に配置する方法

レスポンシブなレイアウトを実現するには、フレックス エラスティック ボックスを使用します。レイアウトは次のとおりです。

  <div class="app">
    <div id="desktop">
      <h1>你好世界</h1>
    </div>
  </div>

解決：

.app {
    
    
  width: 100%;	//铺满全屏
  height: 100%;
  display: flex;	//弹性盒子
  justify-content: center;	//水平居中
  align-items: center;	//垂直居中
  background-color: blueviolet;
  border: solid 2px black;
}

#desktop {
    
    
  width: 100px;
  height: 50px;
  background-color: yellowgreen;
  border: solid 2px black;
}

元の効果:

達成された効果: (緑色のボックスが水平方向と垂直方向の中央に配置されます)

注: align-content 属性は、複数の軸の配置が定義されている場合にのみ使用できるため、ここでは使用できません。項目に軸が 1 つしかない場合、このプロパティは効果がありません。

補足資料:
justify-content 属性の場合、5 つの値を取ることができ、特定の配置は軸の方向に関連します。以下では、主軸が左から右であると仮定します。

flex-start (デフォルト): 左揃え
flex-end: 右揃え
center: 中央揃え
space-between: 両端に揃えて項目間の間隔を等しくします。
space-around: 各項目の両側に等しい間隔を置きます。したがって、項目間の間隔は、項目と境界線の間の間隔の 2 倍になります。以下に示すように。

align-items 属性は、項目が交差軸上でどのように配置されるかを定義します。これは 5 つの値を取ることができます。特定の配置は交差軸の方向に関連しており、以下では交差軸が上から下であると仮定しています。

flex-start: 交差軸の開始点を揃えます。
flex-end: 交差軸の端が揃えられます。
center: 交差軸の中点が揃えられます。
ベースライン: アイテム内のテキストの最初の行のベースライン配置。
ストレッチ (デフォルト): 項目に高さが設定されていない場合、または自動に設定されている場合、項目はコンテナーの高さ全体を占めます。

参考資料:
Flex Layout Grammar チュートリアル
https://www.runoob.com/w3cnote/flex-grammar.html