Centrarea verticală cu CSS

Centrarea verticală cu CSS, iata cateva metode usoare pentru a face asta.

1.Metoda Table

<div class="table">
  <p>Center!</p>
</div>

.table {
  display: table;
}

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

2. Metoda absolute

<div class="absolute">
  <p>Center!</p>
</div>

.absolute {
  position: relative;
}

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

3. Metoda Flexbox

<div class="flexbox">
  <p>Center!</p>
</div>

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

4. Metoda Grid

<div class="grid">
  <p>Center!</p>
</div>

.grid {
  display: grid;
  place-items: center;
}