Cómo centrar horizontalmente un elemento

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

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

preguntado el 22 de septiembre de 08 a las 10:09

De esas excelentes respuestas, solo quiero resaltar que debes darle a "#inner" un "ancho", o será "100%", y no puedes saber si ya está centrado. -

Joma Tech me trajo aquí -

@Barbu Barbu: ¿De qué manera? ¿En que contexto? -

JomaTech me trajo aquí. -

30 Respuestas

Puede aplicar este CSS al interior <div>:

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

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

Si está apuntando Internet Explorer 8 (y más tarde), 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 una 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>


EDITAR

¡Con flexbox Es muy fácil diseñar el div centrado horizontal y verticalmente.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

Respondido el 23 de enero de 21 a las 06:01

Para el centrado vertical suelo utilizar "line-height" (line-height == height). Esto es simple y agradable, pero solo funciona con un texto de contenido de una línea :) - Nicolás Guillaume

Tienes que usar la etiqueta! DOCTYPE en tu página html para que funcione bien en IE. - Fabio

Tenga en cuenta que puede ser necesario agregar "float: none;" para el #inner. - Mert Mertce

También establece los márgenes superior e inferior en 0, que no está relacionado. Mejor poniendo margin-left: auto; margin-right: auto Creo. - emmanuel touzery

No necesariamente margin:0 auto: puede ser margin: <whatever_vertical_margin_you_need> auto el segundo es el margen horizontal. - YakovL

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>

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

respondido 22 nov., 17:11

@SabaAhang la sintaxis correcta para eso sería float: none; y probablemente solo sea necesario porque #inner ha heredado un float de cualquiera de las left or right desde otro lugar de su CSS. - doug mclean

Esta es una buena solución. Solo ten en cuenta que el interior heredará text-align por lo que es posible que desee establecer el interior text-align a initial o algún otro valor. - pmoleri

pero ¿no está la pregunta relacionada con centrar un div por completo y no solo el texto? ¿Se puede usar text-align para centrar divs de alineación? o es solo por texto? - Ashwin K José

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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Según su facilidad de uso, también puede utilizar el box-orient, box-flex, box-direction propiedades.

Flex:

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

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

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

contestado el 15 de mayo de 19 a las 14:05

Asegúrate de leer esta respuesta primero antes de implementar esta solución. - cimarrón

Safari, a partir de ahora, todavía requiere -webkit banderas para flexboxdisplay: -webkit-flex; y -webkit-align-items: center; y -webkit-justify-content: center;) - Joseph Hansen

Siempre pienso que usar mucho código es una mala práctica, por ejemplo, con este código centro mi div: display: table; margen: automático; simple y fácil - Simon

Suponga que su div tiene 200 píxeles de ancho:

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

Asegúrese de que el elemento padre sea posicionado, es decir, relativo, fijo, absoluto o pegajoso.

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

https://jsfiddle.net/gjvfxxdj/

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

contestado el 09 de mayo de 20 a las 15:05

No me gusta esta solución porque cuando el elemento interno es demasiado ancho para la pantalla, no se puede desplazar horizontalmente por todo el elemento. margen: 0 automático funciona mejor. - También

margen izquierdo: automático; margen derecho: automático; centra un elemento a nivel de bloque - pantalla de muerte

El ancho predeterminado para la mayoría de los elementos de nivel de bloque es automático, que llena el área disponible en la pantalla. El simple hecho de estar centrado lo coloca en la misma posición que la alineación izquierda. Si desea que esté centrado visualmente, debe establecer un ancho (o un ancho máximo, aunque Internet Explorer 6 y versiones anteriores no lo admiten, e IE 7 solo lo admite en modo estándar). - pantalla de muerte

He creado este ejemplo para mostrar como verticalmente y horizontalmente align.

El código es básicamente este:

#outer {
  position: relative;
}

y ...

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

Y se quedará en el center incluso cuando tu cambiar el tamaño tu pantalla.

contestado el 11 de mayo de 20 a las 21:05

+1 para este método, estaba a punto de responder con él. Tenga en cuenta que debe declarar un ancho en el elemento que desea centrar horizontalmente (o la altura si se centra verticalmente). Aquí hay una explicación completa: codepen.io/shshaw/full/gEiDt. Uno de los métodos más versátiles y con más soporte para centrar elementos vertical y / u horizontalmente. - stvnrynlds

No puede usar relleno dentro del div, pero si desea dar la ilusión, use un borde del mismo color. - Ardilla

Creo que para que este método funcione, debes establecer el valor y la altura del div interno - Nicolás S.Xu

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

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

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

Entonces, si tiene un marcado simple como:

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

... y desea 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 buscar.

respondido 17 mar '18, 20:03

¿Qué quiere decir con "la sintaxis está desactualizada", está en desuso? - Kongaraju

La especificación Flexbox ha pasado por 3 revisiones importantes. El borrador más reciente es de septiembre de 2012, que oficialmente desaprueba todos los borradores anteriores. Sin embargo, la compatibilidad con los navegadores es irregular (especialmente los navegadores antiguos de Android): stackoverflow.com/questions/15662578/… - cimarrón

Esto funcionó para mí en Chrome cuando la versión de Justin Poliey no lo hizo. - vern jensen

¿No es el "justify-content: center;" para la alineación vertical y los "elementos de alineación: centro"; para la alineación horizontal? - Wouter vanherck

@WouterVanherck depende de la flex-direction valor. Si es 'fila' (el valor predeterminado), entonces justify-content: center; es para la alineación horizontal (como mencioné en la respuesta) Si es 'columna', entonces justify-content: center; es para la alineación vertical. - danield

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

Respondido 29 Oct 13, 17:10

mismos requisitos que la pantalla: bloque en línea también (quirksmode.org/css/display.html) - Montreal

También usé esto, pero nunca me he encontrado display: table; antes de. ¿Qué hace? - cremas mate

Centrar un 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%;
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

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

Respondido 25 Feb 21, 03:02

Este es el único que funciona para un centrado perfecto y permanecerá centrado incluso después de que se modifiquen los contenidos en el div. - Fani Rithvij

Es un buen truco, pero hay una pequeña advertencia. Si el elemento tiene contenido en línea que es más ancho que el 50% del ancho del padre, entonces el 50% adicional de compensación del left extrapolará el ancho del padre, dividiendo el contenido en las siguientes líneas para evitar el desbordamiento. Pero es posible mantener el contenido en línea estableciendo en el elemento centrado el white-space atribuir a nowrap. Prueba eso en esto JSFiddle. - Felip Oliveira

Seleccione las width y establecer margin-left y margin-right a auto. Eso es solo para horizontal, aunque. Si quieres ambas cosas, lo harás en ambas direcciones. No tenga miedo de experimentar; no es como si pudieras romper algo.

respondido 17 mar '18, 19:03

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

contestado el 08 de mayo de 20 a las 18:05

y si no conoces el ancho? ¿Diga porque el contenido es dinámico? - gman

¿anchura máxima? que hay de eso? - usuario9016207

yo suelo width: fit-content; y margin: 0 auto. Creo que esto puede funcionar con un ancho desconocido. - Almiar

Propiedad de alineación de caja de CSS 3

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

contestado el 09 de mayo de 20 a las 15:05

Asegúrate de leer esta respuesta primero antes de implementar esta solución. - cimarrón

Recientemente tuve que centrar un div "oculto" (es decir, display:none;) que tenía un formulario en tabla que debía centrarse en la página. Escribí el siguiente código jQuery para mostrar el div oculto y luego actualicé el contenido CSS al ancho generado automáticamente de la tabla y cambié el margen para centrarlo. (El cambio de visualización se activa al hacer clic en un enlace, pero no era necesario mostrar este código).

NOTA: Estoy compartiendo este código, porque Google me trajo a esta solución Stack Overflow y todo habría funcionado, excepto que los elementos ocultos no tienen ancho y no se pueden cambiar de tamaño / centrar hasta después de que se muestren.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

contestado el 09 de mayo de 20 a las 14:05

La forma en que normalmente lo hago es usando la posición absoluta:

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

El div externo no necesita ninguna propiedad adicional para que esto funcione.

contestado el 31 de mayo de 16 a las 14:05

Es posible que esto no funcione si tiene otros divs debajo del div centrado. - NoChance

Para Firefox y Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Para Internet Explorer, Firefox y Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

LA text-align: La propiedad es opcional para los navegadores modernos, pero es necesaria en el modo Quirks de Internet Explorer para la compatibilidad con los navegadores heredados.

respondido 17 mar '18, 19:03

No es necesaria la propiedad de alineación de texto. Es completamente innecesario. - Touhid Rahman

text-align es realmente necesario para que funcione en el modo rápido de IE, por lo que si no le importa agregar una pequeña expresión para admitir navegadores más antiguos, manténgala allí. (IE8 con las reglas de IE8 y las reglas de IE7 funcionan sin alineación de texto, por lo que es posible que solo se trate de IE6 y versiones anteriores) - holaherramientas

Uso:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

contestado el 11 de mayo de 20 a las 20:05

Otra solución para esto sin tener que establecer un ancho para uno de los elementos es usar CSS 3 transform atributo.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

El truco es que translateX(-50%) establece el #inner elemento 50 por ciento a la izquierda de su propio ancho. Puede utilizar el mismo truco para la alineación vertical.

Aquí hay una Violín mostrando alineación horizontal y vertical.

Más información está en Mozilla Developer Network.

respondido 17 mar '18, 19:03

También se pueden necesitar prefijos de proveedor: -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0); - Skippy el Gran Gourou

Chris Coyier, quien escribió un excelente post sobre 'Centrarse en lo desconocido' en su blog. Es un resumen de múltiples soluciones. Publiqué uno que no está publicado en esta pregunta. Tiene más compatibilidad con el navegador que el Flexbox solución, y no estás usando display: table; que podría romper otras cosas.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

contestado el 11 de mayo de 20 a las 21:05

Recientemente encontré un enfoque:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Ambos elementos deben tener el mismo ancho para funcionar correctamente.

contestado el 11 de mayo de 20 a las 20:05

Solo establezca esta regla para #inner sólo: #inner { position:relative; left:50%; transform:translateX(-50%); }. Esto funciona para cualquier ancho. - José Rui Santos

Por ejemplo, ver este enlace y el fragmento a continuación:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Si tiene muchos hijos con un padre, entonces su contenido CSS debe ser así ejemplo en violín.

El contenido HTML se ve así:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Entonces mira esto ejemplo en violín.

respondido 17 mar '18, 18:03

Centrado solo horizontalmente

En mi experiencia, la mejor manera de centrar un cuadro horizontalmente es aplicar las siguientes propiedades:

El contenedor:

  • should have text-align: center;

El cuadro de contenido:

  • should have display: inline-block;

Demostración:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Vea también este violín!


Centrado tanto horizontal como verticalmente

En mi experiencia, la mejor manera de centrar una caja ambas vertical y horizontalmente es utilizar un contenedor adicional y aplicar las siguientes propiedades:

El contenedor exterior:

  • should have display: table;

El contenedor interior:

  • should have display: table-cell;
  • should have vertical-align: middle;
  • should have text-align: center;

El cuadro de contenido:

  • should have display: inline-block;

Demostración:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Vea también este violín!

Respondido el 20 de junio de 20 a las 10:06

La forma más fácil:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

respondido 17 mar '18, 18:03

Como señala su violín, #inner debe tener un ancho establecido. - Michael Terry

#outer no necesita ninguno width:100%; como el <div> por defecto siempre tiene width:100%. y text-align:center tampoco es necesario en absoluto. - Mobarak Alí

Si se desconoce el ancho del contenido, puede utilizar el siguiente método. Supongamos que tenemos estos dos elementos:

  • .outer - ancho completo
  • .inner - sin ancho establecido (pero se podría especificar un ancho máximo)

Suponga que el ancho calculado de los elementos es de 1000 píxeles y 300 píxeles respectivamente. Proceder de la siguiente:

  1. Envuelva .inner dentro .center-helper
  2. Haz .center-helper un bloque en línea; se vuelve del mismo tamaño que .inner por lo que tiene 300 píxeles de ancho.
  3. Push .center-helper 50% correcto en relación con su padre; esto coloca su izquierda en 500 píxeles wrt. exterior.
  4. Push .inner 50% restante en relación con su padre; esto coloca su izquierda en -150 píxeles wrt. ayudante central, lo que significa que su izquierda está en 500 - 150 = 350 píxeles wrt. exterior.
  5. Activar el desbordamiento .outer a oculto para evitar la barra de desplazamiento horizontal.

Demostración:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

contestado el 11 de mayo de 20 a las 21:05

Alineación de texto: centro

La aplicación de text-align: center el contenido en línea está centrado dentro del cuadro de línea. Sin embargo, dado que el div interno tiene por defecto width: 100% tienes que establecer un ancho específico o usar uno de los siguientes:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Margen: 0 automático

Usar margin: 0 auto es otra opción y es más adecuada para la compatibilidad de navegadores más antiguos. Funciona junto con display: table.

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


Flexbox

display: flex se comporta como un elemento de bloque y presenta su contenido de acuerdo con el modelo flexbox. Funciona con justify-content: center.

Ten en cuenta que: Flexbox es compatible con la mayoría de los navegadores, pero no con todos. Ver pantalla: flex no funciona en Internet Explorer para obtener una lista completa y actualizada de la compatibilidad de los navegadores.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Transformar

transform: translate le permite modificar el espacio de coordenadas del modelo de formato visual CSS. Utilizándolo, los elementos se pueden traducir, rotar, escalar y sesgar. Para centrar horizontalmente se requiere position: absolute y left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


<center> (Obsoleto)

La etiqueta <center> es la alternativa HTML a text-align: center. Funciona en navegadores más antiguos y en la mayoría de los nuevos, pero no se considera una buena práctica ya que esta función es obsoleto y se ha eliminado de los estándares web.

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

Respondido 05 Oct 20, 08:10

Puedes hacer algo como esto

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Esto también alineará el #inner verticalmente. Si no lo desea, elimine el display y vertical-align propiedades;

Respondido 16 Oct 13, 18:10

Esto es lo que quieres de la forma más corta.

JSFDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

respondido 09 nov., 15:03

Eso lo centra verticalmente. - Michael Terry

Flex tiene una cobertura de soporte de navegador de más del 97% y podría ser la mejor manera de resolver este tipo de problemas en pocas líneas:

#outer {
  display: flex;
  justify-content: center;
}

respondido 17 mar '18, 18:03

Puedes usar display: flex para su div exterior y para centrar horizontalmente, debe agregar justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

O puedes visitar w3schools - Propiedad flex de CSS Para más ideas.

Respondido 20 ago 18, 13:08

Este método también funciona bien:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Para el interior <div>, la única condición es que su height y width no debe ser mayor que los de su recipiente.

contestado el 11 de mayo de 20 a las 21:05

en lo que respecta a editar registros, esta persona respondió primero en la página. Voto a favor. - código para la vida

Bueno, logré encontrar una solución que tal vez se ajuste a todas las situaciones, pero usa JavaScript:

Esta es la estructura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Y aquí está el fragmento de JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Si desea utilizarlo en un enfoque receptivo, puede agregar lo siguiente:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

respondido 17 mar '18, 18:03

Existía una opción que encontré:

Todo el mundo dice que use:

margin: auto 0;

Pero hay otra opción. Establezca esta propiedad para el div padre. Funciona perfectamente en cualquier momento:

text-align: center;

Y mira, el niño va al centro.

Y finalmente CSS para ti:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

respondido 17 mar '18, 18:03

text-align funciona para la alineación del texto en su contenedor, no para su contenedor con su padre. - Lalit Kumar Maurya

Lo pruebo, tengo un problema con establecer el niño en el centro, debe cuando tenga más un niño, más veces el margen: 0 respuesta de fuente automática, pero, centro de alineación de texto, para el padre, haga que este niño sea el centro, incluso si son elementos y no ser texto, probar y ver qué pasa - Pnsadeghy

texto-alinear texto central solamente. Tiene razón en este momento, pero cuando escribe un contenedor css que contiene un niño con diferente ancho y color, su código no funciona. Pruébelo de nuevo !!!! - Lalit Kumar Maurya

Ver este ejemplo jsfiddle.net/uCdPK/2 y dime que te parece !!!!! - Lalit Kumar Maurya

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.