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.