CSSでテキストを中央揃えする方法

1. text-alignプロパティを使用する方法: CSSのtext-alignプロパティを使用すると、要素内のテキストを中央揃えすることができます。以下は例です。

<style>
  .centered-text {
    text-align: center;
  }
</style>
<div class="centered-text">
  ここに中央揃えしたいテキストを入力します。
</div>

2. flexboxを使用する方法: CSSのflexboxを使用すると、要素を中央に配置することができます。以下は例です。

<style>
  .centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 要素の高さを指定 */
  }
</style>
<div class="centered-container">
  <span>ここに中央揃えしたいテキストを入力します。</span>
</div>

3. gridを使用する方法: CSSのgridを使用すると、要素を中央に配置することも可能です。以下は例です。

<style>
  .centered-container {
    display: grid;
    place-items: center;
    height: 200px; /* 要素の高さを指定 */
  }
</style>
<div class="centered-container">
  <span>ここに中央揃えしたいテキストを入力します。</span>
</div>