Centering Anything, and I mean anything with CSS(and Flexbox)

Centering text, Centering elements, a pain in the neck for frontend developers everywhere. We're going to be using flexbox to battle this so I'm assuming you already have a fair knowledge on the subject, If not, here's a link https://www.w3schools.com/css/css3_flexbox.asp to help. Diving right in, we're going to center this button:

// HTML

Copy<div class="flex-container">
  <button>I am centered</button>
</div>

// CSS

Copy.flex-container{
  display:flex;
  justify-content: center;
  align-items: center

  // not relevant to actual centering
  height: 100px;
  width: 100px;
  border: 2px solid red
}