css vertical align
Centro CSS verticalmente
Centro um div verticalmente horizontalmente
<div class="elemento-vertical-horizontal-central"> Vertically Center Element Inside a Fixed Size Div </div>
.elemento-vertical-horizontal-central { display: flex; /* justify-content vai alinhá-lo horizontalmente */ justify-content: center; /* align-items vai alinhá-lo verticalmente */ align-items: center; height: 50vh; }
vertical align
Maneira antiga para centrar verticalmente um elemento
Maneira antiga era usar display:table
e definir seu filho para display:table-cell
e colocá-lo para vertical-align:middle
.
<div class="usandoTabela"> <h1>Centrado</h1> </div>
.usandoTabela { display: table; height: 50vh; width: 100%; text-align: center; } .usandoTabela h1 { display: table-cell; vertical-align: middle; }
text vertical align
Verticalmente central usandoRelative-Absolute Position
<div class="parent"> <p class="child">Centrado usando Relative-Absolute Positioning</p> </div>
.parent { position: relative; height: 50vh; } .child { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; }
.parent { position: relative; height: 50vh; } .child { width: fit-content; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content; }
Verticalmente central usando Grid
vertical align middle
<div class="grid"> <p>Central usando Grid</p> </div> <div class="grid-pi"> <p>Central usando Grid Place Items</p> </div> <div class="grid-margin"> <div class="grid-margin-child">Central usando Grid e Margin</div> </div>
.grid { display: grid; align-items: center; justify-content: center; height: 50vh; }
vertical center
Usando place-items
que é taquigrafia para align-items
e justify-items
.grid-pi { display: grid; place-items: center; height: 50vh; }
Usando margin
com Grid
.grid-margin { display: grid; height: 50vh; } .grid-margin-child { margin: auto; }