¿Cómo puedo centrar horizontalmente un div dentro de otro div?

Question

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/

Answer 1

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.

Answer 2

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:

• CSS-Tricks - A Complete Guide to Flexbox
• Codrops - Flexbox

---

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.

Answer 3

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>

Answer 4

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

Answer 5

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>

Answer 6

.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.

Answer 7

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>

Answer 8

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>

Answer 9

Lo Mas Rápido Es Incluir la Etiqueta dentro de la Parte esa de código, sin CSS Ni Flex-Bos Ni Na De Na...Eso se Hace así de sencillo:

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

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

Answer 10

Lo Mas Rápido Es Incluir la Etiqueta dentro de la Parte esa de código, sin CSS Ni Flex-Bos Ni Na De Na...Eso se Hace así de sencillo:

HTML CODE:

<center>
  <div class="externo">
      <div class="interno">
      </div>
  </div>
</center>

CSS CODE:
.interno {
    background-color: green;
    height: 20px;
    width: 50%;
}

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

Answer 11

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.

Answer 12

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>