Circle with centered text in HTML and CSS

August 25, 2018
code cooperative css html example code

As we learned with the box model, browsers basically represent everything in boxes, or rectangles. Fortunately, you can think of a circle as a square with really rounded corners.

We can make a square from a div by setting its height and width properties to the same value.

Then, we need to set the border-radius property, which controls the roundness of an element’s corners.

Lastly, we can use flexbox to help us center the text by setting the div’s display property to flex.

justify-content: center; will center the content horizontally.

align-items: center; will center content vertically.

An example:

See the Pen qMbpqe by Cassie Moy (@cassiemoy) on CodePen.