---
layout: pattern
title: Content Center
description: |
  A centering technique that is only a few lines of CSS, works great for many elements,
  but has the side effect of making children match the width of the widest element.
  <br><br>
  See the full article for many more details about this
  technique and when it's efficient.
  <br><br>
  <a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
date: 2022-06-01
height: 300
---

A centering technique that is only a few lines of CSS, works great for many elements,
but has the side effect of making children match the width of the widest element.

See the full article for many more details about this
technique and when it's efficient.

<a href="/centering-in-css/">Full article</a> · <a href="https://www.youtube.com/watch?v=ncYzTvEMCyE">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/centering">Source on Github</a>
