Fluffy Center

A centering technique that puts the content in the center via equal padding around all its sides.

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>
  <h1 class="fluffy-center">Fluffy Center</h1>
</article>

CSS


        .fluffy-center {
  padding: 15vmin;
  /* any large amount of padding works */
}