If you're anything like me, vertically and horizontally centering an HTML element has been the bane of your existence at some point in your career.
Luckily, this solution works in every browser, even IE 11:
display: flex; justify-content: center; align-items: center;
justify-content is for horizontal alignment. Removing it or setting
justify-content: flex-start; places the child element on the left. Setting
justify-content: flex-end; places the child element on the right.
align-items is for vertical alignment. Removing it or setting
align-items: flex-start; places the child element at the top. Setting
align-items: flex-end; places the child element at the bottom.
Here's an example.
You can probably stop using
absolute left/right and top/bottom positioning,
transform, and any other tricks :)