【CSS】要素を中央寄せにする方法

CSS

CSS (Cascading Style Sheets) を使用して、Webページの要素を中央に寄せることができます。

下記の CSS コードは、要素を水平方向・垂直方向の両方に中央寄せする方法を示しています。

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

上記の CSS コードでは、「center」というクラスを持つ要素を、flexbox を使用して中央寄せしています。

対象のHTML要素に上記のクラスを適用することで、そのHTML要素は中央に寄せられます。

<div class="center">
  <p>これは中央寄せされる要素です</p>
</div>

また、text-alignプロパティも使用して、文字列の中央寄せを行うことができます。

.center-text{
  text-align: center;
}

上記のCSSコードを適用した上記のHTML要素の中の文字列も中央寄せされます。

<div class="center-text">
  <p>これは中央寄せされる要素です</p>
</div>

これらの方法を使用して、あなたの Web ページの要素を中央寄せすることができます。