【CSS】正円(レスポンシブ)の中央にテキストを配置する

レスポンシブ（画面サイズに影響されて楕円に歪まない）にて作った正円の上下左右中央に、テキストを配置する方法の紹介です。

改行が入っても問題ありません。

サンプルとソースコード

こちらをコピペで大丈夫です。円のサイズやパディングなどをお好みで。

See the Pen text-in-circle by masakitano (@masakitano) on CodePen.

複数の円を横に並べる

実際はこんな使い方が多いかなと思います。

円が3つほど横に並ぶ（画面幅に合わせて縦並び）レイアウト。

”3つの特徴”などのコンテンツで使えそうですね。

See the Pen text-in-circle-3col by masakitano (@masakitano) on CodePen.

以上になります。

活用してみてください。