CSS: zentrales Element innerhalb eines & lt; div & gt; Element

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>

Dieser sollte Mitte der div

2016 - HTML5 + CSS3-Methode

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/

InformationsquelleAutor der Antwort Warface

einfach das parent-div position: relative

InformationsquelleAutor der Antwort stephenmurdoch

Zuerst kannst du es mit left:50%, um es relativ zum übergeordneten div aber, dass Sie lernen müssen die CSS-Positionierung.

Eine mögliche Lösung von vielen ist, etwas zu tun, wie

    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

wenn Ihr Eure div zentriert positioniert ist relativ, Sie kann nur tun,

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

InformationsquelleAutor der Antwort Ehtesham

Wenn das Kind-element der inline-e.g nicht eine divtable etc) würde ich wickeln Sie es in einem div oder eine p und stellen die wrapper-text-align css-Eigenschaft gleich center.

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

Ansonsten, wenn das element einen block (display: blocke.g a div oder eine p) mit einer festen Breite, ich würde setzen Sie dessen Rand Links und rechts css-Eigenschaften auf "automatisch".

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

Könnte man natürlich hinzufügen text-align: center auf dem wrapper-element, um dessen Inhalt zentriert, wie gut.

Ich nicht die Mühe mit der Positionierung, weil IMHO ist es nicht der Weg zu gehen für das OPs-problem, aber sicher sein, zu überprüfen dieser link aus, sehr hilfreich.

InformationsquelleAutor der Antwort Spyros

Ich habe eine andere Lösung gefunden

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

und im Körper

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

Diese wird zum Mittelpunkt Ihres content-div, wenn Ihr container größer oder kleiner. In diesem Fall ist Ihr Inhalt sollte größer als 1100% der container nicht zentriert werden, aber in diesem Fall kannst du mit der containerSecond größer, und es wird funktionieren

InformationsquelleAutor der Antwort Ruben

Wenn Sie verwenden möchten CSS3:

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

Möchten Sie vielleicht zu weiteren Recherchen, um herauszufinden, wie man den Prozentsatz an, passend zu Ihrem element die Breite.

InformationsquelleAutor der Antwort user3178128

Wenn Sie wollen-center-Elemente innerhalb eines div und kümmern sich nicht über die Teilung Größe, die Sie verwenden könnten, Flex-power. Ich ziehe mit flex und verwenden Sie nicht die exakte Größe für die Elemente.

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

Wie Sie sehen können Äußere div ist Flex-container und Innen muss Flex-Element angegeben mit flex: 1 1 auto; für besser zu verstehen, Sie konnte sehen, dass diese einfache Probe. http://jsfiddle.net/QMaster/hC223/

Hoffe, dass dies helfen.

InformationsquelleAutor der Antwort QMaster

mir würde wie Magie.

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>

InformationsquelleAutor der Antwort Azizi Musa