CSS: elemento centrale all'interno di un elemento <div>

Per centrare un elemento HTML posso usare il CSS left: 50%;. Tuttavia, questo centra l'elemento rispetto all'intera finestra.

Ho un elemento che è figlio di un <div>elemento e voglio centrare il bambino rispetto a questo genitore <div>, non all'intera finestra.

Non voglio che il contenitore <div>abbia tutto il suo contenuto centrato, solo un figlio specifico.

Impostare text-align:center;sul div padre e margin:auto;sul div figlio.

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

Questa è una buona risorsa per centrare principalmente qualsiasi cosa.
http://howtocenterincss.com/

In realtà questo è molto semplice con le scatole flessibili 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>

AGGIORNARE:

Sembra che non ho letto la modifica OP nel momento in cui ho scritto questa risposta. Il codice sopra centrerà tutti gli elementi interni (senza sovrapposizioni), ma l' OP vuole centrare solo un elemento specifico , non gli altri elementi interni. Quindi il secondo metodo di risposta @Warface è più appropriato, ma richiede comunque un centraggio verticale:

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

Questo dovrebbe centrare il div

2016 - Metodo 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>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

text-align:center; sul genitore div Dovrebbe fare il trucco

Per centrare solo il bambino specifico:

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

OPPURE, puoi usare anche la flessibilità, ma ciò centrerebbe tutti i bambini

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

Puoi usare il nome della classe flex bootstrap in questo modo:

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

Funzionerà anche con il numero di elementi all'interno.

Il div è una larghezza fissa o una larghezza del fluido? In entrambi i casi, per la larghezza del fluido è possibile utilizzare:

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

Oppure puoi impostare il div genitore su text-align:center;e il div figlio su text-align:left;.

E left:50%;lo centra solo in base all'intera pagina quando il div è impostato su position:absolute;. Se hai impostato il div su di left:50%;esso, dovresti farlo in relazione alla larghezza del div del genitore. Per larghezza fissa, procedere come segue:

#parent {
width:500px;
}

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

dai il genitore div position: relative

Se vuoi usare CSS3:

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

Potresti voler fare ulteriori ricerche per capire come ottenere la percentuale per adattarla alla larghezza del tuo elemento.

Prima di tutto puoi farlo con sinistra: 50% per centrarlo rispetto al div genitore, ma per questo devi imparare il posizionamento CSS.

Una possibile soluzione da molti è fare qualcosa di simile

    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

se il tuo div da centrare è posizionato relativamente, puoi semplicemente farlo

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

sinistra: il 50% lavora in modo resettativo al genitore più vicino con la larghezza statica assegnata. Prova la larghezza: 500 px o qualcosa del genere div. In alternativa, fai in modo che il contenuto che desideri centrare sia visualizzato: blocca e imposta i margini sinistro e destro su auto.

Se l'elemento figlio è in linea (ad es. Non a div, tableecc.) Lo avvolgo in a divo a pe renderebbe il testo del wrapper allineare la proprietà css uguale 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>

Altrimenti, se l'elemento è un blocco ( display: block, ad es. A divo a p) con una larghezza fissa, imposterò le sue proprietà css di margine destro e sinistro su auto.

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

Ovviamente potresti aggiungere text-align: centera l'elemento wrapper per centrare anche il suo contenuto.

Non mi preoccuperò del posizionamento perché IMHO non è la strada da percorrere per il problema dei PO, ma assicurati di controllare questo link , molto utile.

Crea un nuovo elemento div per centrare il tuo elemento, quindi aggiungi una classe specifica per centrare quell'elemento in questo modo

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

Css

.centered{
    text-align:center;
}

Ho trovato un'altra soluzione

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

e nel corpo

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

Questo centrerà il div del contenuto ogni volta che il contenitore è più grande o più piccolo. In questo caso il contenuto dovrebbe essere maggiore dell'1100% del contenitore per non essere centrato, ma in tal caso puoi renderlo con il contenitoreSecondo più grande e funzionerà

Assegna text-align: center;al genitore e display: inline-block;al div.

per esempio, ho un div articolo che si trova all'interno di un div contenuto principale. All'interno dell'articolo c'è un'immagine e sotto quell'immagine c'è un pulsante, stile come questo:

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

}

/ * all'interno dell'articolo voglio che l'immagine sia centrata * /

.article img {

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

}

/ * Ora sotto questa immagine nello stesso elemento dell'articolo dovrebbe esserci un pulsante come per saperne di più Naturalmente devi lavorare con em o% quando si trova all'interno di un design reattivo * /

.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..*/

}

In bocca al lupo

Se vuoi centrare gli elementi all'interno di un div e non ti interessa la dimensione della divisione, puoi usare Flex power. Preferisco usare la flessibilità e non usare la dimensione esatta per gli elementi.

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

Come puoi vedere, il div esterno è il contenitore Flex e l'interno deve essere l'elemento Flex specificato con flex: 1 1 auto;per capire meglio che potresti vedere questo semplice esempio. http://jsfiddle.net/QMaster/hC223/

Spero che questo aiuto.

il mio vorrebbe 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>