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>

<p>Center!</p>

</div>

.table {
  display: table;
}

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

.table {

display: table;

}

.table p {

display: table-cell;

vertical-align: middle;

}

2. Metoda absolute

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

<p>Center!</p>

</div>

.absolute {
  position: relative;
}

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

.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>

<p>Center!</p>

</div>

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

.flexbox {

display: flex;

align-items: center;

justify-content: center;

}

4. Metoda Grid

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

<p>Center!</p>

</div>

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

.grid {

display: grid;

place-items: center;

}

Lasă un răspuns Anulează răspunsul