Ads by ProfitSence
Close

Centro verticalmente horizontalmente un elemento div que usa CSS

Last Updated on jueves 6º oct. 2022

Centro CSS verticalmente

Centro a div verticalmente.

			
					<div class="vertical-horizontal-centro-elemento">
   Elemento central vertical dentro de un tamaño fijo
</div>

			
	
			
					.vertical-horizontal-centro-elemento {
  display: flex;
  /* justify-content lo alineará horizontalmente */
  justify-content: center;
  /* align-items lo alineará verticalmente */
  align-items: center;
  height: 50vh;
}

			
	

Antigua forma de centrar verticalmente un elemento.

Antiguo camino era usar display:table y poner a su hijo a display:table-cell y ponerlo a vertical-align:middle.

			
					<div class="usandoTabla">
  <h1>Centrado</h1>
</div>

			
	
			
					.usandoTabla {
  display: table;
  height: 50vh;
  width: 100%;
  text-align: center;
}
.usandoTabla h1 {
  display: table-cell;
  vertical-align: middle;
}

			
	

Centro vertical usando Relative-Absolute Position

			
					<div class="padre">
  <p class="child">Centro usando Relative-Absolute Positioning</p>
</div>

			
	
			
					.padre {
  position: relative;
  height: 50vh;
}

.child {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

			
	
			
					.padre {
  position: relative;
  height: 50vh;
}
.child {
  width: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
}

			
	

Centro vertical usando Grid

			
					<div class="grid">
  <p>Centro usando Grid</p>
</div>
<div class="grid-pi">
  <p>Centro usando Grid Place Items</p>
</div>
<div class="grid-margin">
  <div class="grid-margin-child">Centrado usando Grid y Margins</div>
</div>

			
	
			
					.grid {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

			
	

Utilizando place-items que es taquigrafía para align-items y justify-items

			
					.grid-pi {
  display: grid;
  place-items: center;
  height: 50vh;
}

			
	

O usando margin con Grid

			
					.grid-margin {
  display: grid;
  height: 50vh;
}

.grid-margin-child {
  margin: auto;
}