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
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
display property to
justify-content: center; will center the content horizontally.
align-items: center; will center content vertically.