CSSを使用した中央にテキストを配置する円形要素の作成方法

方法1: Flexboxを使用する方法

HTMLの構造:

<div class="circle">
  <span class="text">テキスト</span>
</div>

CSSのスタイル:

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #eaeaea;
}
.text {
  text-align: center;
}

方法2: Positionを使用する方法

HTMLの構造:

<div class="circle">
  <span class="text">テキスト</span>
</div>

CSSのスタイル:

.circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #eaeaea;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

方法3: Gridを使用する方法

HTMLの構造:

<div class="circle">
  <span class="text">テキスト</span>
</div>

CSSのスタイル:

.circle {
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #eaeaea;
}
.text {
  text-align: center;
}

これらの方法を使用すると、円形要素の中央にテキストを配置することができます。適宜、円形要素のサイズや背景色を変更してデザインに合わせてください。

以上が、CSSを使用して中央にテキストを配置する円形要素の作成方法です。