CSS - How to center element both horizontally and vertically

css flexbox css grid

I often find myself do a Google search for this. So the following snippet demonstrates how to do this.

  1. Using Flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: center;
  1. Using CSS Grid
.wrapper {
display: grid;
place-items: center;