CSS: elemento central dentro de un elemento

Para centrar un elemento HTML, puedo usar el CSS que left: 50%; . Sin embargo, esto centra el elemento con respecto a toda la ventana.

Tengo un elemento que es hijo de un elemento

y quiero centrar al niño con respecto a este elemento primario

, no a toda la ventana.

¿Cómo puedo hacer eso?

EDITAR : No quiero que el contenedor

tenga todo su contenido centrado, solo el hijo específico.

Establecer text-align:center; al div principal, y margin:auto; para el niño div.

 #parent { text-align:center; background-color:blue; height:400px; width:600px; } .block { height:100px; width:200px; text-align:left; } .center { margin:auto; background-color:green; } .left { margin:auto auto auto 0; background-color:red; } .right { margin:auto 0 auto auto; background-color:yellow; } 
 
a block to align center and with text aligned left
a block to align left and with text aligned left
a block to align right and with text aligned left

En realidad, esto es muy sencillo con los cuadros CSS3 Flex .

 .flex-container{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: center; align-items: center; width: 400px; height: 200px; background-color: #3498db; } .inner-element{ width: 100px; height: 100px; background-color: #f1c40f; } 
 

CSS

  body{ text-align:center; } .divWrapper{ width:960px //Change it the to width of the parent you want margin: 0 auto; text-align:left; } 

HTML

 
Tada!!

Esto debería centrar el div

2016 – Método HTML5 + CSS3

CSS

 div#relative{ position:relative; } div#thisDiv{ position:absolute; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } 

HTML

 
Bla bla bla

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

text-align:center; en el div padre debe hacer el truco

solo dale a la position: relative padre div position: relative

¿Es el div un ancho fijo o un ancho fluido? De cualquier manera, para el ancho de fluido puede usar:

 #element { /* this is the child div */ margin-left:auto; margin-right:auto; /* Add remaining styling here */ } 

O bien, podría establecer el div principal en text-align:center; y el niño div para text-align:left; .

Y a la left:50%; solo lo centra de acuerdo con toda la página cuando div se establece en position:absolute; . Si estableces el div a la left:50%; debería hacerlo en relación con el ancho del div principal. Para ancho fijo, haz esto:

 #parent { width:500px; } #child { left:50%; margin-left:-100px; width:200px; } 

En primer lugar, puedes hacerlo con la izquierda: 50% para centrarla en relación con la div principal, pero para eso necesitas aprender CSS.

Una posible solución de muchos es hacer algo como

  div.parent { text-align:center; } //will center align every thing in this div as well as in the children element div.parent div { text-align:left;} //to restre so every thing would start from left 

si tu div tu esta centrado se posiciona relativamente, solo puedes hacer

  .mydiv { position:relative; margin:0 auto; } 

A la izquierda: el 50% trabaja de forma resectiva con el padre más cercano con ancho estático asignado. Pruebe width: 500px o algo en div principal. Como alternativa, cree el contenido que necesita para centrar la pantalla: bloquee y establezca los márgenes izquierdo y derecho en automático.

Si el elemento hijo está en línea (p. Ej., No un div , una table , etc.) lo envolvería dentro de un div o una p y haré que el texto del envoltorio alinee la propiedad css igual al centro.

  
This text is aligned to the left.
So is this text.
This is centered.
This text is still aligned left.

De lo contrario, si el elemento es un bloque ( display: block , por ejemplo, un div o una p ) con un ancho fijo, establecería sus propiedades de margen izquierdo y derecho css en automático.

  
This text is aligned to the left.
So is this text.
My parent is centered.
This text is still aligned left.

Por supuesto, puede agregar un text-align: center al elemento contenedor para hacer que su contenido también esté centrado.

No me molestaré con el posicionamiento porque en mi humilde opinión no es el camino a seguir para el problema de los PO, pero asegúrese de revisar este enlace , muy útil.

Crea un nuevo elemento div para que se centre tu elemento, luego agrega una clase específica para centrar ese elemento como este

 

Css

 .centered{ text-align:center; } 

He encontrado otra solución

  

y en cuerpo

 

Esto centrará su div de contenido cada vez que su contenedor sea más grande o más pequeño. En este caso, su contenido debe ser más grande que el 1100% del contenedor para que no se centre, pero en ese caso puede hacer con contenedor Second second larger, y funcionará

Asignar text-align: center; al padre y display: inline-block; a la div.

Si quieres usar CSS3:

 position:absolute; left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx); 

Es posible que desee hacer más búsquedas para descubrir cómo obtener el porcentaje que se ajuste al ancho de su elemento.

por ejemplo, tengo un artículo div que está dentro de un div principal de contenido. Dentro del artículo hay una imagen y debajo de esa imagen hay un botón, estilo como este:

.article {

 width: whatever; text-align: center; float: whatever (in case you got more articles in a row); margin: give it whatever margin you want; 

} .article {

}

/ * dentro del artículo quiero que la imagen esté centrada * /

.article img {

 float: none; margin: 0 auto; padding: give it a padded ridge if you want; 

}

/ * Ahora, debajo de esta imagen en el mismo elemento del artículo debería haber un botón como leer más. Por supuesto, necesitas trabajar con em o% cuando está dentro de un diseño receptivo * /

.button {

 background: #whatever color: padding: 4.3567%; /*Instead of fixed width*/ text-align: cente; font: whatever; max-width: 41.4166%; float: none; margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/ 

}

Buena suerte

Si quieres centrar elementos dentro de un div y no te importa el tamaño de la división, podrías usar Flex power. Prefiero usar flex y no uso el tamaño exacto para los elementos.

 
This is the inner Content

Como puede ver, el div externo es el contenedor Flex y el interno debe ser un elemento flexible que se especifica con flex: 1 1 auto; para una mejor comprensión, puedes ver esta simple muestra. http://jsfiddle.net/QMaster/hC223/

Espero que esto ayude.

Esta publicación proporciona una buena solución – http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/ Básicamente: 1. Establezca al niño en posición absoluta. 2. Establezca el elemento primario en posición relativa. 3. Ajuste la izquierda y la parte superior del niño al 50%. 4. traduzca (-50%, – 50%) para desplazarse hacia la izquierda y hacia arriba por la mitad del ancho del elemento secundario.

el mío me gustaría magia.

 html, body { height: 100%; } .flex-container{ display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -ms-flex-pack: center; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } 
Content