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

Tengo un problema. Tengo el código html así:

El CSS así:

 #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #container { width: auto; height: auto; margin: 0 auto; padding: 10px; position: relative; } 

Supongo que el #container se centrará en #main_content. Sin embargo, no lo es. Solo quiero averiguar el motivo y cómo hacerlo centrado.

Necesita establecer el ancho del contenedor. ( auto no funcionará)

 #container { width: 640px; /*can be in percentage also.*/ height: auto; margin: 0 auto; padding: 10px; position: relative; } 

La referencia CSS de MDN lo explica todo.

Mira estos enlaces

  • auto – referencia de CSS | MDN
  • margen – Referencia CSS | MDN
  • ¿Cuál es el significado del valor auto en una propiedad de CSS? – StackOverflow

Actualización – En acción @ jsFiddle

Técnicamente, su DIV interior ( #container ) se centra horizontalmente. La razón por la que no puede decir es porque con el width: auto CSS width: auto propiedad width: auto , el DIV interno se está expandiendo al mismo ancho que su elemento primario.

Vea este violín: http://jsfiddle.net/UZ4AE/

 #container { width: 50px; height: auto; margin: 0 auto; padding: 10px; position: relative; background-color: red; } 

En este ejemplo, simplemente configuro el ancho de #container a 50px y configuré el fondo en red para que pueda ver que está centrado.

Creo que la verdadera pregunta es “¿Cómo centro elementos horizontalmente con CSS?” y la respuesta es (tamboril por favor): ¡depende!

No haré un repaso completo de las miles de maneras de centrar las cosas con CSS cuando W3Schools lo hace tan bien aquí: http://www.w3schools.com/css/css_align.asp, pero la idea básica es que para elementos de nivel de bloque usted simplemente especifica el ancho deseado y establece los márgenes izquierdo y derecho en auto .

 .center { margin-left: auto; margin-right: auto; width: 50px; } 

Tenga en cuenta: ¡ Esta respuesta solo se aplica a los elementos de nivel BLOCK! Para colocar un elemento INLINE, necesitará usar la propiedad text-align: center en el primer padre BLOCK.

Otra forma interesante: violín

css

 .container{ background:yellow; width: %100; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .centered-div{ width: 80%; height: 190px; margin: 10px; padding:5px; background:blue; color:white; } 

html

 
Enjoy

Puedes centrar float div con este pequeño código:

 #div { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; } 

Ahora solo defina su

#main_content text-align:center y defina su #container display:inline-block;

como este

 #main_content{ text-align:center; } #container{ display:inline-block; vertical-align:top; } 

Intenta agregar

 text-align: center; 

a la statement de css de contenedor principal. Y siguiendo al contenedor de niño:

 display: inline-block; 

Debe hacer el truco.

funcionaría dando el ancho de div #container: 80% [cualquier ancho menor que el contenido principal y se ha dado en% para que se administre bien desde la izquierda y la derecha] y dando margen: 0px auto; O margen: 0 auto; [ambos funcionan bien].

Intentaría definir un ancho más específico, para empezar. Es difícil centrar algo que ya abarca todo el ancho:

 #container { width: 400px; } 

aquí está la solución

  #main_content { background-color: #2185C5; height: auto; margin: 0 auto; min-height: 500px; position: relative; width: 800px; } 
 #main_content { width: 400px; margin: 0 auto; min-height: 300px; height: auto; background-color: #2185C5; position: relative; } #container { width: 50%; height: auto; margin: 0 auto;background-color: #ccc; padding: 10px; position: relative; } 

prueba esto probado bien. cheque en vivo en jsfiddle

Puede ser que quieras como esto: Demo

html …

 
vertical aligned text
some more text here

css …

 #main_content{ width: 500px; height: 500px; background: #2185C5; display: table-cell; text-align: center; vertical-align: middle; } #container{ width: auto; height: auto; background: white; display: inline-block; padding: 10px; } 

¿Cómo? >>> En una celda de tabla, la alineación vertical con el medio se configurará verticalmente centrada en el elemento y text-align: center; funciona como alineación horizontal con el elemento. Se dio cuenta de por qué #container está en bloque en línea porque está en condición de fila. ¿Cualquier pregunta?

intenta obtener la position:relative; en tu #container , agrega el ancho exacto a #container

 #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #container { width:600px; height: auto; margin:auto; padding: 10px; } 

demostración de trabajo

Aquí hay una nueva forma de centrar fácilmente su div usando la pantalla flexible.

Ver este violín de trabajo: https://jsfiddle.net/5u0y5qL2/

Aquí está el css:

 .layout-row{ box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row; } .layout-align-center-center{ -webkit-box-align: center; -webkit-align-items: center; -ms-grid-row-align: center; align-items: center; -webkit-align-content: center; align-content: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } 

Es porque su ancho está configurado en automático. Debe especificar el ancho para que esté visiblemente centrado. Su #container cubre todo el ancho del #main_content. Es por eso que parece no centrado,

Sin establecer el Width obtendrá el ancho máximo que puede obtener. Entonces no puedes ver que Div ha centrado.

 #container { width: 50%; height: auto; margin: auto; padding: 10px; position: relative; background-color:black; /* Just to see the different*/ } 

use margin:0 auto; para el niño div. Luego puedes centrar el div infantil dentro del div principal.

todos lo dijeron, pero supongo que no hará daño decirlo de nuevo. necesita establecer el width a algún valor. aquí hay algo más simple de entender.

http://jsfiddle.net/XUxEC/

Haz el CSS de esta manera …

 #main_content { top: 160px; left: 160px; width: auto; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #container { height: auto; width: 90%; margin: 0 auto; background-color: #fff; padding: 10px; } 

Ejemplo de trabajo aquí -> http://jsfiddle.net/golchha21/mjT7t/

si no quieres establecer un ancho para #container solo agrega

 text-align: center; 

a #main_content

Si establece width: auto a un elemento de bloque, entonces el ancho sería 100%. Entonces realmente no tiene mucho sentido el valor auto aquí. Realmente lo mismo para la altura, porque por defecto cualquier elemento se establece en una altura automática.

Así que, finalmente, tu div#container está centrado, pero ocupa todo el ancho de su elemento principal. Usted hace el centrado, solo necesita cambiar el ancho (si es necesario) para ver que está realmente centrado. Si quiere centrar su #main_content, simplemente aplique margin: 0 auto; en eso.

prueba este si este es el resultado que quieres:

 
#main_content { background-color: #2185C5; margin: 0 auto; } #container { width: 100px; height: auto; margin: 0 auto; padding: 10px; background: red; }

Esto funcionará bien, aunque creo que deberías restablecer “top: 200px”; de acuerdo a tu necesidad–

 #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; border:2px solid #cccccc; } #container { width: 100px; height: 20px;; margin: 0 auto; padding-top: 10px; position: relative; top:200px; border:2px solid #cccccc; } 

Debe asignar un ancho al div que desea centrar.

Me gusta esto:

 #container { width: 500; margin: 0 auto; padding: 10px; } 

Más información y ejemplos en estos enlaces:

http://www.w3schools.com/css/css_align.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

 .parent { width:500px; height:200px; border: 2px solid #000; display: table-cell; vertical-align: middle; } #kid { width:70%; /* 70% of the parent*/ margin:auto; border:2px solid #f00; height: 70%; } 

Esto resuelve el problema muy bien (probado en todos los navegadores nuevos), donde el padre div tiene class = “parent” y el niño div tiene id = “kid”

Ese estilo se centra tanto en sentido horizontal como vertical. El centro vertical solo se puede hacer con trucos complicados, o haciendo que la función div principal sea una celda de tabla, que es uno de los únicos elementos en HTML que admite correctamente la alineación vertical. Simplemente configure la altura del niño, el margen automático y la alineación vertical media, y funcionará. Es la solución más fácil que conozco.

He usado el siguiente método en algunos proyectos

https://jsfiddle.net/u3Ln0hm4/

 .cellcenterparent{ width: 100%; height: 100%; display: table; } .cellcentercontent{ display: table-cell; vertical-align: middle; text-align: center; } 

para hacer un div en el centro no es necesario asignar ancho de div.

demostración de trabajo Aquí …

http://jsfiddle.net/6yukdmwq/

 .container{width:100%; height:500px;display:table;border:1px solid red;text-align:center;} .center{display:table-cell;vertical-align:middle;} .content{display:inline-block;text-align:center; border:1px solid green;} 

Helllo Center Text

 * { box-sizing: border-box; } #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #container { width: 50%; height: 50%; margin: auto; padding: 10px; position: absolute; border: 5px solid yellow; top: 0; left: 0; right: 0; bottom: 0; }