CSS: elemento central dentro de un elemento <div>

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

Tengo un elemento que es hijo de un <div>elemento y quiero centrarlo con respecto a este padre <div>, no toda la ventana.

No quiero que el contenedor <div>tenga todo su contenido centrado, solo un hijo específico.

Se establece text-align:center;en el div principal y margin:auto;en el div secundario.

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

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

Este es un buen recurso para centrar casi cualquier cosa.
http://howtocenterincss.com/

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

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

<div class="flex-container">
  <div class="inner-element"></div>
</div>

ACTUALIZAR:

Parece que no leí la edición de OP en el momento en que escribí esta respuesta. El código anterior centrará todos los elementos internos (sin superponerse entre ellos), pero el OP quiere que solo se centre un elemento específico , no los otros elementos internos. Por lo tanto, el segundo método de respuesta de @Warface es más apropiado, pero aún requiere un centrado vertical:

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

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

<div class="divWrapper">Tada!!</div>

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

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Violín

https://jsfiddle.net/1z7m83dx/

text-align:center; en el padre div Debería hacer el truco

Para centrar solo el niño específico:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

O, también puede usar flex, pero eso centraría a todos los niños

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

Puede usar el nombre de clase de bootstrap flex así:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

Eso funcionará incluso con varios elementos dentro.

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

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

O puede establecer el div principal en text-align:center;y el div secundario en text-align:left;.

Y left:50%;solo lo centra de acuerdo con toda la página cuando el div está configurado en position:absolute;. Si configura el div en left:50%;él, debería hacerlo en relación con el ancho del div padre. Para ancho fijo, haga esto:

#parent {
width:500px;
}

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

solo dale al padre div position: relative

Si quieres usar CSS3:

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

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

En primer lugar, puede hacerlo con left: 50% para centrarlo en relación con el div padre, pero para eso necesita aprender el posicionamiento 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 restore so every thing would start from left

si su div para centrarse está posicionado relativamente, simplemente puede hacer

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

izquierda: el 50% funciona de manera resectiva al padre más cercano con ancho estático asignado. Intente ancho: 500 px o algo en el div padre. Alternativamente, cree el contenido que necesita para centrar la pantalla: bloquee y configure los márgenes izquierdo y derecho en automático.

Si el elemento hijo está en línea (por ejemplo, no a div, tableetc.), lo envolvería dentro de a divo a py haría que el texto del contenedor alinee la propiedad css igual al centro.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

De lo contrario, si el elemento es un bloque ( display: blockpor ejemplo, un divo una p) con una anchura fija, me gustaría establecer su margen propiedades CSS recto con auto e izquierdo.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

Por supuesto, podría agregar un text-align: centerelemento de contenedor para centrar también su contenido.

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

Cree un nuevo elemento div para que su elemento se centre, luego agregue una clase específicamente para centrar ese elemento de esta manera

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

Css

.centered{
    text-align:center;
}

He encontrado otra solucion

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

y en cuerpo

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

Esto centrará su contenido div cada vez que su contenedor sea más grande o más pequeño. En este caso, su contenido debe ser mayor al 1100% del contenedor para que no esté centrado, pero en ese caso puede hacer con containerSecond más grande, y funcionará

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

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

.artículo {

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

} .artículo {

}

/ * dentro del artículo quiero centrar la imagen * /

.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, debe 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 desea centrar elementos dentro de un div y no le importa el tamaño de la división, puede usar la potencia Flex. Prefiero usar flex y no uso el tamaño exacto para los elementos.

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

Como puede ver, Div externo es el contenedor Flex y el interno debe ser el elemento Flex que se especificó flex: 1 1 auto;para comprender mejor que puede ver esta muestra simple. http://jsfiddle.net/QMaster/hC223/

Espero que esto ayude.

al mío le 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;
}


<div class="flex-container">
  <div>Content</div>
</div>

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>