Verticalmente horizontalmente center um elemento

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;
}