spanを上下方向に中央配置 CSSコードの置き場所 justify-contentなどの使い方

ここではのコードを紹介します。

詳しい説明はございません。コピペして使用してください。

span要素を上下方向に中央配置するCSSのコード

ここでは仮に50%幅、高さ300pxのdivとします。

<div style="width: 50%; height: 300px; margin: 0 auto; background-color: #bbbbbb;">
  <span>spanです</span>
</div>

spanです

span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

説明　span要素をflexとして扱うように設定し、align-itemsをcenterに設定し、justify-contentをcenterに設定し、heightを100%に設定しています。これにより、span要素は上下方向に中央配置されます。

注意　align-itemsが適用される要素はflex containerなので、その要素を囲っている要素に対してdisplay:flexを適用する必要があります。