¿Cómo puedo centrar horizontalmente un elemento?

¿Cómo puedo centrar horizontalmente uno <div>dentro de otro <div>usando CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Sep 22 '08 19:09 Peter Mortensen

Con flexboxél es muy fácil diseñar el div centrado horizontal y verticalmente.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Expandir fragmento

Para alinear el div verticalmente centrado, use la propiedad align-items: center.

Otras soluciones

Puedes aplicar este CSS al interior <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Por supuesto, no es necesario configurarlo widthen 50%. Cualquier ancho menor que el contenedor <div>funcionará. Esto margin: 0 autoes lo que hace el centrado real.

Si su objetivo es Internet Explorer 8 (y posterior), podría ser mejor tener esto en su lugar:

#inner {
  display: table;
  margin: 0 auto;
}

Hará que el elemento interior se centre horizontalmente y funcionará sin establecer un valor específico width.

Ejemplo de trabajo aquí:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Expandir fragmento

Sep 22 '2008 12:09 isherwood

Si no desea establecer un ancho fijo en el interior, divpuede hacer algo como esto:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Expandir fragmento

Eso convierte el interior diven un elemento en línea que se puede centrar con text-align.

Jan 20 '2011 22:01 Alfred

Los mejores enfoques son con CSS3.

El modelo de caja antiguo (obsoleto)

display: boxy sus propiedades box-pack, box-align, box-orient, box-directionetc. han sido reemplazadas por flexbox. Si bien es posible que aún funcionen, no se recomienda su uso en producción.

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Expandir fragmento

Según su usabilidad también puede utilizar las box-orient, box-flex, box-directionpropiedades.

El modelo de caja moderno con Flexbox

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Lea más sobre cómo centrar los elementos secundarios

Módulo de modelo de caja CSS Nivel 3
Modelo de caja (CSS2)
alineación de caja en MDN

Y esto explica por qué el modelo de caja es el mejor enfoque :

¿Por qué se considera mejor el modelo de caja del W3C?

Aug 30 '2012 12:08 kongaraju

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

Expandir fragmento

Asegúrese de que el elemento principal esté posicionado , es decir, relativo, fijo, absoluto o fijo.

Si no conoce el ancho de su div, puede usarlo transform:translateX(-50%);en lugar del margen negativo.

Con CSS calc() , el código puede volverse aún más simple:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

El principio sigue siendo el mismo; Coloque el artículo en el medio y compense el ancho.

Dec 01 '2011 19:12 Lars Flieger