アイテムを中央揃えするには

ボックスの中央揃え

CSS を使用して、あるボックスを別のボックスの中に配置するには、親コンテナーで CSS ボックス配置プロパティを使用する必要があります。これらの配置プロパティは、ブロックやインラインレイアウトにおいてはブラウザーがまだ対応していないので、配置を使用する機能を有効にするためには、親コンテナーをフレックスまたはグリッドにする必要があります。

下記の例では、親コンテナーに display: flex を指定し、水平方向に配置するために justify-content を center に、垂直方向に配置するために align-items を center に設定しています。

<div class="wrapper">
  <div class="box">これを中央揃えします</div>
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  background-color: rgb(69 164 181);
  border-radius: 5px;
  padding: 10px;
  color: #fff;
}

関連情報

• フレックスボックスでのボックス配置
• グリッドレイアウトでのボックス配置