css

Centering an element

Centering elements with CSS.

How does that work?

Centering elements with CSS is a straightforward task. By using the align-content and text-align properties, you can center elements horizontally and vertically.

<div class="container">
  🫧
</div>

body {
  margin: 0;
  padding: 0;
}
.container {
  align-content: center; /* vertical centering */
  text-align: center; /* horizontal centering */
  
  --size: 300px;
  height: var(--size);
  width: var(--size);
  font-size: calc(var(--size) / 2.5);
  background-color: darkcyan;
  margin: 0 auto;
}