Day067 — Vertically center with CSS

I watched a video showing people how to align things vertically with CSS.

1. table

.table {
  display: table;
}
.table p {
  display: table-cell;
  vertical-align: middle;
}

2. absolute

.absolute {
  position: relative;
}
.absolute p {
  position: absolute;
/*   height: 100%; */
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

3. flex

.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

4. grid

.grid {
  display: grid;
/*   align-items: center;
  justify-content: center; */
  place-items: center;
}

5. margin

.margins {
/*   display: flex; */
  display: grid;
}
.margins p {
  margin: auto;
}

All credit goes to Kevin Powell.