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

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

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

サンプルとソースコード

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

See the Pen
by masakitano (@masakitano)
on CodePen.

複数の円を横に並べる

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

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

よくある”3つの特徴”みたいなコンテンツですね。

See the Pen
by masakitano (@masakitano)
on CodePen.

挫折しないWeb制作学習ならデイトラがお勧めです

8/31まで限定で、全コース1万円引きのキャンペーンを開催されています。

詳細は下記バナーをクリックして、公式サイトを覗いてみてください。