Centering things

To center something both ways inside a container, make the container a flex box with justify-content: center and align-items: center and give it a height. Grid does it in one declaration: display: grid; place-items: center;. Both work for any content, text or boxes.

For the other common cases: text-align: center centers inline content such as text inside a block; margin: 0 auto centers a block that has a width of its own inside its parent.

.hero { display: flex; justify-content: center; align-items: center; height: 200px; }

Your task

Make .stage 200px tall and center .ball inside it horizontally and vertically. Also center the text of .caption with text-align.

<!doctype html>
<html>
<head>
<style>
.stage { background: rgb(240, 241, 243); display: flex; justify-content: center; align-items: center; height: 200px; }
.ball { width: 60px; height: 60px; border-radius: 50%; background: rgb(47, 111, 237); }
.caption { text-align: center; }
</style>
</head>
<body>
<div class="stage">
  <div class="ball"></div>
</div>
<p class="caption">Perfectly centered</p>
</body>
</html>