CSS: zentriertes Element innerhalb eines <div> -Elements

Um ein HTML-Element zu zentrieren, kann ich das CSS verwenden left: 50%;. Dies zentriert das Element jedoch in Bezug auf das gesamte Fenster.

Ich habe ein Element, das ein Kind eines <div>Elements ist, und ich möchte das Kind in Bezug auf dieses Elternteil zentrieren <div>, nicht auf das gesamte Fenster.

Ich will nicht der Behälter <div>haben , alle , das Kind eine bestimmte gerade zentriert sein Inhalt.

Stellen Sie text-align:center;das übergeordnete Div und margin:auto;das untergeordnete Div ein.

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

Dies ist eine gute Ressource, um fast alles zu zentrieren.
http://howtocenterincss.com/

Tatsächlich ist dies mit CSS3- Flexboxen sehr einfach .

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

AKTUALISIEREN:

Es scheint, dass ich die OP-Bearbeitung zum Zeitpunkt des Schreibens dieser Antwort nicht gelesen habe. Der obige Code zentriert alle inneren Elemente (ohne sich zu überlappen), aber das OP möchte, dass nur ein bestimmtes Element zentriert wird , nicht die anderen inneren Elemente. Die zweite Methode von @Warface Answer ist also geeigneter, erfordert jedoch immer noch eine vertikale Zentrierung:

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

Dies sollte das div zentrieren

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/

text-align:center; auf dem Elternteil div Sollte den Trick machen

So zentrieren Sie nur das bestimmte Kind:

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

ODER Sie können auch Flex verwenden, aber das würde alle Kinder zentrieren

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

Sie können den Namen der Bootstrap-Flex-Klasse folgendermaßen verwenden:

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

Das funktioniert auch mit einer Anzahl von Elementen im Inneren.

Ist das div eine feste Breite oder eine flüssige Breite? In beiden Fällen können Sie für die Flüssigkeitsbreite Folgendes verwenden:

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

Oder Sie können das übergeordnete div auf text-align:center;und das untergeordnete div auf setzen text-align:left;.

Und left:50%;zentriert es nur entsprechend der gesamten Seite, wenn das div auf eingestellt ist position:absolute;. Wenn Sie das Div darauf setzen left:50%;, sollte dies relativ zur Breite des übergeordneten Div erfolgen. Führen Sie für eine feste Breite Folgendes aus:

#parent {
width:500px;
}

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

Gib einfach dem Elternteil div position: relative

Wenn Sie CSS3 verwenden möchten:

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

Möglicherweise möchten Sie weitere Suchvorgänge durchführen, um herauszufinden, wie der Prozentsatz an die Breite Ihres Elements angepasst werden kann.

Zunächst können Sie dies mit left tun: 50%, um es relativ zum übergeordneten div zu zentrieren, aber dafür müssen Sie die CSS-Positionierung lernen.

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

    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 zu zentrierendes Div relativ positioniert ist, können Sie dies einfach tun

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

links: 50% arbeiten resektiv zum nächsten übergeordneten Element mit zugewiesener statischer Breite. Versuchen Sie Breite: 500px oder etwas auf übergeordnetem div. Alternativ können Sie den Inhalt, den Sie zum Zentrieren der Anzeige benötigen, blockieren: Blockieren und den linken und rechten Rand auf Auto setzen.

Wenn das Kind Element Inline ist (zB kein div, tableetc.) würde ich es in ein einpacken divoder ein pund machen die Wrapper - Text align CSS - Eigenschaft gleich zum Zentrum.

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

Wenn das Element ein Block ( display: blockz. B. a divoder a p) mit einer festen Breite ist, würde ich die CSS-Eigenschaften für den linken und rechten Rand auf auto setzen.

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

Sie können text-align: centerdem Wrapper-Element natürlich auch ein hinzufügen , um dessen Inhalt ebenfalls zu zentrieren.

Ich werde mich nicht um die Positionierung kümmern, da es meiner Meinung nach nicht der richtige Weg ist, um das OP-Problem zu lösen, aber sehen Sie sich diesen Link unbedingt an, sehr hilfreich.

Erstellen Sie ein neues div-Element, damit Ihr Element zentriert werden kann, und fügen Sie dann eine Klasse hinzu, die speziell für das Zentrieren dieses Elements wie dieses vorgesehen ist

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

Css

.centered{
    text-align:center;
}

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>

Dadurch wird Ihr Inhaltsbereich immer dann zentriert, wenn Ihr Container größer oder kleiner ist. In diesem Fall sollte Ihr Inhalt größer als 1100% des Containers sein, um nicht zentriert zu werden. In diesem Fall können Sie mit containerSecond größer machen, und es wird funktionieren

Weisen Sie text-align: center;auf die Eltern und display: inline-block;an die div.

Zum Beispiel habe ich ein Artikel-Div, das sich in einem Hauptinhalts-Div befindet. In dem Artikel befindet sich ein Bild und unter diesem Bild befindet sich eine Schaltfläche im folgenden Stil:

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

}}

/ * innerhalb des Artikels möchte ich das Bild zentriert * /

.article img {

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

}}

/ * Jetzt sollte sich unter diesem Bild im selben Artikelelement eine Schaltfläche wie read more befinden. Natürlich müssen Sie mit em oder% arbeiten, wenn es sich in einem reaktionsschnellen Design befindet. * /

.Taste {

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

}}

Viel Glück

Wenn Sie Elemente innerhalb eines Div zentrieren möchten und sich nicht für die Divisionsgröße interessieren, können Sie Flex Power verwenden. Ich bevorzuge die Verwendung von Flex und verwende keine exakte Größe für Elemente.

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

Wie Sie sehen können, ist Outer div ein Flex-Container und Inner muss ein Flex-Element sein, mit dem flex: 1 1 auto;zum besseren Verständnis angegeben wurde. Sie können dieses einfache Beispiel sehen. http://jsfiddle.net/QMaster/hC223/

Ich hoffe das hilft.

meins möchte 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>

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