47

Necesito centrar horizontalmente el div interno dentro del externo tomando como base este código HTML y CSS:

<div class="externo">
    <div class="interno">
    </div>
</div>
.interno {
    background-color: green;
    height: 20px;
    width: 50%;
}

.externo {
    background-color: red;
    width: 200px;
    padding: 20px;
}

JSFiddle: https://jsfiddle.net/fpvkcrkg/

4
  • 4
    Centrar en vertical, en horizontal, o en ambos?
    – Jcl
    Commented el 1 dic. 2015 a las 19:08
  • margin: 0 auto; es lo que buscas, aunque te recomiendo una googleada antes de poner preguntas por acá. Commented el 1 dic. 2015 a las 19:09
  • @Carlangueitor es bueno que salgan estas preguntas aquí, malo seria que estuviera duplicado. Commented el 1 dic. 2015 a las 19:16
  • Algunas formas adicionales de centrar un div dentro de otro div (con posiciones) aquí. Commented el 12 dic. 2016 a las 10:17

11 respuestas 11

40

Usa márgenes laterales automáticos.

.externo {
  border: 1px solid blue;
}
.interno {
  border: 1px dashed goldenrod;
  margin: auto;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Realmente solo debes de ponerlos en sus valores margin-left y margin-right, pero en tu caso al no requerir margen superior y/o inferior, te valdría de esa forma, ya que según la documentación si se espefica de esa forma sería igual que hacer:

.interno {
  margin: 0 auto;
}

Es decir, el superior e inferior es igual a cero.

2
  • 4
    Recordando sin embargo que mediante márgenes automáticos a derecha e izquierda es necesario definir el ancho del elemento mediante la propiedad width. Commented el 1 dic. 2015 a las 22:29
  • 1
    Lo que es una obviedad, porque en caso de no indicar ancho, el valor es igual a auto, lo que en un elemento de bloque, como es el caso de OP (¿PO? ¿AO?), cubriría todo el ancho disponible y ya no habría que centrar nada.
    – pzin
    Commented el 2 dic. 2015 a las 13:54
23

Existen muchas formas de centrar elementos con CSS, sin embargo una de las que mayor fuerza han tomado en el último año es el uso de Flexbox.

Usando Flexbox el contenedor no necesita tener ninguna propiedad especifica para ubicarse en el espacio, sin embargo usando las propiedades de Flexbox para los hijos se puede hacer cosas impensables con el CSS tradicional.

.externo {
  border: 1px solid blue;
  align-items: center;
  display: flex;
  justify-content: center;
}
.interno {
  border: 1px dashed goldenrod;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Para conocer más acerca de Flexbox te recomiendo visitar los siguientes enlaces:


Si buscas una solución que no incluya Flexbox entonces te recomiendo visitar Centering in CSS: A Complete Guide. Esta es la guía absoluta de como centrar elementos utilizando CSS sin importar el navegador que necesites soportar.

10
  • creo que pondria el display: flex antes de el align-items. (De hecho, pondria el display antes de casi cualquier cosa) Commented el 1 dic. 2015 a las 19:19
  • 2
    Los recursos vinculados deberian estar en español, no? Commented el 1 dic. 2015 a las 19:19
  • 4
    Sigue sin ser tan buena y detallada como las tres que enlazo... Insisto, por qué limitarnos? StackOverflow en Español no debe ser una excusas para evitar aprender un idioma que nos va a ayudar enormemente en impulsar nuestras carreras como desarrolladores. No ganamos nada con la exclusión.
    – Dave Gomez
    Commented el 1 dic. 2015 a las 19:24
  • 4
    Estoy de acuerdo... limitarnos a vínculos en Español sería extremadamente limitado (y bastante triste)
    – Jcl
    Commented el 1 dic. 2015 a las 19:27
  • 1
    @FabiánHerediaMontiel no necesariamente, los recursos adicionales no son parte de la respuesta, son una fuente de información adicional para el que quiera/pueda leerlos. Lo que si es importante es que si el link contiene la respuesta, ese texto se debe incluir acá en la respuesta y explicado en español Commented el 1 dic. 2015 a las 19:35
15

Agrega un margin:0 auto; a la clase interno en el CSS para lograr centrarlo horizontalmente dentro del div externo

.interno {
  background-color: green;
  height: 20px;
  width: 50%;
  margin: 0 auto;/*esto fue lo que se agregó*/
}
.externo {
  background-color: red;
  width: 200px;
  padding: 20px;
  text-align:center;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

7

Puedes aplicar este CSS al div interno:

.interno {
  width: 50%;
  margin: 0 auto;
  border: 1px dashed goldenrod;
}
.externo {
  border: 1px solid blue;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Por supuesto, no tienes que establecer el ancho al 50%. Cualquier ancho inferior al del div padre funcionará. El margin: 0 auto es lo que hace el centrado en sí.

Si quieres incluir IE8+, puede que sea mejor usar esto en su lugar:

.interno {
  display: table;
  margin: 0 auto;
  border: 1px dashed goldenrod;
}
.externo {
  border: 1px solid blue;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Hará que el elemento interno se centre horizontalmente, y funciona sin especificar un ancho concreto.

Fuente

JSFiddle

6

Puedes usar un flexbox en el div externo.

.externo {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
}
.interno {
  border: 1px dashed goldenrod;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

5

.interno {
  background-color: green;
  height: 20px;
  width: 50%;
  margin: 0 auto;
}
.externo {
  border: 1px solid blue;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Simplemente añadiendo la última línea, se centra con respecto a su padre.

5

Otra forma es usar transform: translateX

Establecer en el div externo una posición relative, absolute o fixed y debe tener dimensiones definidas.

En el div interno position: absolute y left: 50%, luego aplicar transform: translateX(-50%).

.externo {
  position: relative;
  width: 200px;
  height: 100px;
  background: gray;
}

.interno {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translateX(-50%);
  background: red;
}
<div class="externo">
  <div class="interno">
    
  </div>
</div>

Probado en:

  • Opera 24.0 (desde v12.1)
  • Safari 5.1.7 (desde v4 con prefijo -webkit-)
  • Firefox 31.0 (desde v3.6 con prefijo -moz-, desde v16 sin prefijo)
  • Chrome 46 (desde v11 con prefijo -webkit-, desde v36 sin prefijo)
  • IE 9, 11, 10 (desde v9 con prefijo -ms-, desde v10 sin prefijo)
  • Edge (todos)
  • Mas navegadores Compatibles en: Can I Use?

Nota: Combinado con translateY produce un centrado en ambos ejes. Hay que agregar al div interno top: 50%.

.externo {
  position: relative;
  width: 200px;
  height: 100px;
  background: gray;
}

.interno {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
<div class="externo">
  <div class="interno">
    
  </div>
</div>

0

Simplemente añade display: inline-block al <div> interior y lo centras añadiendo text-align: center al <div> exterior.

Quedaría así:

  .interno {
    height: 20px;
    width: 50%;
    background-color: green;
    display: inline-block;
  }
  .externo {
    background-color: red;
    width: 200px;
    padding: 20px;
    text-align: center;
  }
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

0

Si lo único que quieres es que se centren en horizontal lo más fácil es incluir la etiqueta dentro de la parte esa de código, sin CSS Ni Flex-Box... Eso se Hace así de sencillo:

<center>
  <div class="externo">
      <center>  
          <div class="interno">
          </div>
      </center>
  </div>
</center>
.interno {
    background-color: green;
    height: 20px;
    width: 50%;
}

.externo {
    background-color: red;
    width: 200px;
    padding: 20px;
}

-2

La forma más simple es con la etiqueta html "center", también puedes hacerlo con flexbox, position absolute, margen automático, etc.

Algunos ejemplos:

.interno {
  width: 20%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

.externo {
  width: 50%;
  height: 50px;
  position: relative;
  background-color: #ccc;
}

#ejemplo1 .interno {
  background-color: blue;
}

#ejemplo2 .interno {
  position: absolute;
  left: calc(50% - 10%);
  background-color: green;
}

#ejemplo3 .interno {
  margin: 0 auto;
  background-color: red;
}

#ejemplo4.externo {
  display: flex;
  justify-content: center;
}

#ejemplo4 .interno {
  background-color: salmon;
}
<div class="externo" id="ejemplo1">
  <!--etiqueta center (no recomendable)-->
  <center>
    <div class="interno">
      hola mundo
    </div>
  </center>
</div>

<hr>

<div class="externo" id="ejemplo2">
  <!--posición abosluta calculada-->
  <div class="interno">
    hola mundo
  </div>
</div>

<hr>

<div class="externo" id="ejemplo3">
  <!--margen automático (recomendable)-->
  <div class="interno">
    hola mundo
  </div>
</div>

<hr>

<div class="externo" id="ejemplo4">
  <!--flexbox (recomendable)-->
  <div class="interno">
    hola mundo
  </div>
</div>

2
  • 1
    Hola @Pablo Por favor deja en el post ejemplos de código. Tu respuesta debe ser útil incluso si el vínculo hoy día se rompe.
    – JuanK
    Commented el 14 dic. 2015 a las 20:44
  • 2
    No es recomendable el uso del elemento <center>, este es un elemento obsoleto (deprecated) y perderá soporte en el futuro. developer.mozilla.org/en-US/docs/Web/HTML/Element/center
    – Diego
    Commented el 14 dic. 2015 a las 21:22
-2

Simplemente tienes que utilizar impresion 3D que es, el famozo z-index permite posicionar elementos debajo o encima de, de acuerdo al valor asigbado a cada objeto.

z-index: 1 z-index: 2

El elemento uno va a estar debajo del elemento 2.

1
  • 2
    ¿Cómo es que z-index se puede usar para centrar un elemento? Esta propiedad solo maneja el nivel de visibilidad de elementos en stacking.
    – gugadev
    Commented el 26 feb. 2017 a las 7:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.