Pregunta ¿Cómo centrar horizontalmente un
en otro
?


¿Cómo puedo centrar horizontalmente un <div> dentro de otro <div> usando CSS (si es posible)?

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


3626
2018-06-09 08:34


origen


Respuestas:


Puedes aplicar este CSS al interior <div>:

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

Por supuesto, no tienes que configurar el width a 50%. Cualquier ancho menor que el que contiene <div> trabajará. los margin: 0 auto es lo que hace el centrado real.

Si tiene como objetivo IE8 +, podría ser mejor tener esto en su lugar:

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

Hará que el elemento interno se centre horizontalmente y funcione sin establecer un width.

Ejemplo de trabajo aquí:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4087



Si no desea establecer un ancho fijo en el interior div podrías hacer algo como esto:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

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


1109



Los mejores enfoques son con CSS 3.

Modelo de caja:

#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%;
}

De acuerdo con su usabilidad, también puede usar box-orient, box-flex, box-direction propiedades.

Flexionar:

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

Obtenga más información sobre cómo centrar los elementos secundarios

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


297



Supongamos que su div es 200px amplio:

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

Asegúrate de que el elemento padre esté colocado es decir, relativo, fijo, absoluto o adhesivo.

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

https://jsfiddle.net/gjvfxxdj/


215



Creé esto ejemplo para mostrar cómo verticalmente y horizontalmente  align.

El código es básicamente esto:

#outer {
  position: relative;
}

y...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

y permanecerá en el center incluso cuando tu volver a clasificar según el tamaño tu pantalla


200



Algunos carteles han mencionado la forma de CSS 3 para centrarse usando display:box.

Esta sintaxis está desactualizada y no debería usarse más. [Ver también esta publicación].

Entonces, para completar, aquí está la última forma de centrarnos en CSS 3 usando el Módulo de diseño de caja flexible.

Entonces, si tiene marcas simples como:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... y quiere centrar sus elementos dentro del cuadro, esto es lo que necesita en el elemento principal (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Si necesita admitir navegadores más antiguos que usan una sintaxis anterior para flexbox aquí está un buen lugar para mirar.


156



Si no desea establecer un ancho fijo y no desea el margen adicional, agregue display: inline-block a tu elemento.

Puedes usar:

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

119



Propiedad de alineación de cuadro de CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

74



No se puede centrar si no le da ancho, de lo contrario tomará, por defecto, todo el espacio horizontal.


73



Centrar una div de altura y ancho desconocidos

Horizontal y verticalmente Funciona con navegadores razonablemente modernos (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker con eso más adelante Codepen o en JSBin.


73



Selecciona el width y establecer margin-left y margin-right a auto. Eso es solo horizontal, aunque. Si quieres las dos formas, simplemente lo harías en ambos sentidos. No tengas miedo de experimentar; no es como si rompieras algo.


68