Centrarea verticală cu CSS, iata cateva metode usoare pentru a face asta.
1.Metoda Table
|
1 2 3 |
<div class="table"> <p>Center!</p> </div> |
|
1 2 3 4 5 6 7 8 |
.table { display: table; } .table p { display: table-cell; vertical-align: middle; } |
2. Metoda absolute
|
1 2 3 |
<div class="absolute"> <p>Center!</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.absolute { position: relative; } .absolute p { position: absolute; /* height: 100%; */ top: 50%; transform: translateY(-50%); width: 100%; } |
3. Metoda Flexbox
|
1 2 3 |
<div class="flexbox"> <p>Center!</p> </div> |
|
1 2 3 4 5 |
.flexbox { display: flex; align-items: center; justify-content: center; } |
4. Metoda Grid
|
1 2 3 |
<div class="grid"> <p>Center!</p> </div> |
|
1 2 3 4 |
.grid { display: grid; place-items: center; } |