Diseño de layout de CSS - Alineación horizontal y vertical

elemento centrado

elementos centrados horizontal y verticalmente

centrado de elementos

Para centrar un elemento de bloque (como <div>), utilice márgenes: auto;.

Establecer el ancho del elemento evitará que se extienda hasta los bordes del contenedor.

Luego, el elemento ocupará el ancho especificado, y el espacio restante se distribuirá equitativamente entre los márgenes exteriores:

Este elemento div está centrado.

Ejemplo

.center {
  márgenes: auto;
  ancho: 50%;
  border: 3px sólido verde;
  padding: 20px;
{}

Prueba por tu cuenta

Nota:Si no se ha configurado ancho propiedad (o configurela en 100％), el alineamiento centrado no será válido.

alineación de texto centrado

Si solo desea centrar texto dentro de un elemento, utilice text-align: center;:

Este texto está centrado.

Ejemplo

.center {
  text-align: center;
  border: 3px sólido verde;
{}

Prueba por tu cuenta

Consejo:Para más ejemplos sobre cómo alinear texto, consulte Texto de CSS este capítulo.

centrado de imágenes

Si desea centrar una imagen, configure los márgenes laterales exteriores autoy establecerlo como elemento de bloque:}

Ejemplo

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
{}

Prueba por tu cuenta

Alineación izquierda y derecha - usar position

Una manera de alinear elementos es usar position: absolute; :

Este div está alineado a la derecha.

Ejemplo

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
{}

Prueba por tu cuenta

Nota:Los elementos con posicionamiento absoluto se quitarán del flujo normal y pueden solaparse otros elementos.

Alineación izquierda y derecha - usar float

Otra manera de alinear elementos es usar float Atributo:

Ejemplo

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
{}

Prueba por tu cuenta

Nota:Si un elemento es más alto que el elemento que lo contiene y está flotando, se saldrá de su contenedor. Puede usar hack de clearfix para resolver este problema (vea el siguiente ejemplo).

Hack de clearfix

Luego podemos agregar a los elementos contenedores overflow: auto;Para resolver este problema:

Ejemplo

.clearfix {
  overflow: auto;
{}

Prueba por tu cuenta

Alineación vertical - usar padding

Hay muchos métodos para alinear verticalmente elementos en CSS. Una solución sencilla es usar los márgenes superior e inferior internos:

Soy centrado verticalmente.

Ejemplo

.center {
  padding: 70px 0;
  border: 3px sólido verde;
{}

Prueba por tu cuenta

Si necesita alinear vertical y horizontalmente al mismo tiempo, utilice padding y text-align: center;:

Soy centrado horizontal y verticalmente.

Ejemplo

.center {
  padding: 70px 0;
  border: 3px sólido verde;
  text-align: center;
{}

Prueba por tu cuenta

Alineación vertical - usar line-height

Otra técnica es usarsu valorigual a height El valor del atributo line-height Atributo:

Soy centrado horizontal y verticalmente.

Ejemplo

.center {
  line-height: 200px;
  height: 200px;
  border: 3px sólido verde;
  text-align: center;
{}
/* Si hay texto en varias líneas, agregue el siguiente código: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
{}

Prueba por tu cuenta

Alineación vertical - usar position y transform

Si su opción no es padding y line-heightEntonces, otra solución sería usar position y transform Atributo:

Soy centrado horizontal y verticalmente.

Ejemplo

.center { 
  height: 200px;
  position: relative;
  border: 3px sólido verde; 
{}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
{}

Prueba por tu cuenta

Consejo:Usted encontrará en Transformaciones 2D En esta sección, aprenderá más sobre la propiedad transform.

Alineación vertical - Usando Flexbox

También puede usar flexbox para centrar contenido. Tenga en cuenta que IE10 y versiones anteriores no admiten flexbox:

Soy centrado horizontal y verticalmente.

Ejemplo

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px sólido verde; 
{}

Prueba por tu cuenta

Consejo:Usted encontrará en mi Flexbox CSS En esta sección, aprenderá más sobre Flexbox.