Centering in 2025

2025.08.17#lessons

In 2025, how do you go from A --> B with just a few lines of CSS ?

A

B

Hopefully you're not hard-coding pixels values which for one, may not be a responsive solution, but instead are reaching towards css flex and grid functionality. Here's a quick 4 steps recepie on how to create the concentric squares displayed in B above.

1. Starting point

We start with this basic setup:

<main id="grid">
  <div class="content-a"></div>
  <div class="content-b"></div>
</main>

:root {
  --size: 200px;
}
#grid {
  border: 1px solid orange;
  width: var(--size);
  height: var(--size);
}

.content-a {
  border: 1px solid green;
  width: calc(var(--size) / 1.5);
  height: calc(var(--size) / 1.5);
}

.content-b {
  border: 1px solid blue;
  width: calc(var(--size) / 3);
  height: calc(var(--size) / 3);
}

• 3 elements with .content-a and .content-b being children of #grid
• We use the --size variable so we can calculate sizes that make .content- elements fit perfectly in #grid

2. Add CSS Grid + grid-area

Next, start to add grid details to organize how cells should behave:

#grid {
  ...
  display: grid;
}

.content-a, .content-b{
  grid-area:1/1;
}

• display:grid is going to make child elements inside of #grid conform to the column/grid definitions.
• grid-area:1/1 essentially says put both .content- elements in the same grid cell at row 1, column 1. This will stack them on top of each other and aligns them in the upper-left corner of the containing #grid element.

3. Place content

Let's center the cells towards the middle of the #grid:

#grid{
  ...
  place-content:center;
}

• place-content:center tells the grid to center align all its content (the currently defined 'cells' inside the #grid). In this case both .content- elements are given rules to exist in the same cell, resulting in the centering we see.

4. Place self

And finally, we center the .content-a and .content-b within their one cell:

.content-a,
.content-b {
  place-self: center;
}

• place-self:center gets us the correct visual we want. Each .content- centers itself within the one cell of the grid they exist in. The green square doesn't move since it's the larger of the two .content- elements and dictates the size of the cell based on its size. The smaller blue square does move towards the center and gives everything a concentric look.

Full demo on Codepen

~ zan0