Autobot

A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only.

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

Full article · Video on YouTube · Source on Github

HTML

<article class="autobot">
  <h1>Autobot</h1>
</article>

CSS


        .autobot {
  display: flex;
}

.autobot > * {
  margin: auto;
}