Wie zentriere ich ein <div> horizontal?

Wenn Sie keine feste Breite für das innere div festlegen möchten, können Sie Folgendes tun:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Dadurch wird das innere div zu einem Inline-Element, das mit text-align zentriert werden kann.

Die besten Ansätze sind mit CSS 3 .

Box-Modell:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Je nach Verwendbarkeit können Sie auch die box-orient, box-flex, box-direction-Eigenschaften verwenden.

Biegen:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Weitere Informationen zum Zentrieren der untergeordneten Elemente

• Link 2

• Link 3

• Link 4

Und dies erklärt, warum das Boxmodell der beste Ansatz ist:

• Warum wird das W3C-Boxmodell als besser bewertet?

Angenommen, Ihr Div ist 200px breit:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Stellen Sie sicher, dass das übergeordnete Element positioniert d. H. Relativ, fest, absolut oder klebrig ist.

Wenn Sie die Breite Ihres div nicht kennen, können Sie transform:translateX(-50%); anstelle des negativen Randes verwenden.

https://jsfiddle.net/gjvfxxdj/

Ich habe dieses example erstellt, um zu zeigen, wie vertikal und horizontalalign.

Code ist im Grunde Folgendes:

#outer {
  position: relative;
}

und...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

und es bleibt in der center, auch wenn Sie Größe ändern Ihren Bildschirm _.

In einigen Postern wurde die CSS 3-Methode zum Zentrieren mit display:box erwähnt.

Diese Syntax ist veraltet und sollte nicht mehr verwendet werden. [Siehe auch diesen Beitrag) .

Der Vollständigkeit halber sei hier der neueste Weg angegeben, in CSS 3 mit FLEXIBLE BOX LAYOUT MODULE zu zentrieren.

Wenn Sie also ein einfaches Markup haben:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... und Sie möchten Ihre Artikel in der Box zentrieren. Folgendes benötigen Sie für das übergeordnete Element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Wenn Sie ältere Browser unterstützen möchten, die eine ältere Syntax für Flexbox verwenden, ist hier ein guter Ort zum Suchen.

Wenn Sie keine feste Breite festlegen möchten und keinen zusätzlichen Rand wünschen, fügen Sie Ihrem Element display: inline-block hinzu.

Sie können verwenden:

#element {
    display: table;
    margin: 0 auto;
}

CSS3s Box-Align-Eigenschaft

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

Es kann nicht zentriert werden, wenn Sie ihm keine Breite zuweisen. Andernfalls wird standardmäßig der gesamte horizontale Abstand verwendet.

Setzen Sie die Variable width und setzen Sie margin-left und margin-right auf auto. Das ist nur für die Horizontale . Wenn Sie beide Wege wollen, tun Sie es einfach in beide Richtungen. Hab keine Angst zu experimentieren; Es ist nicht so, als würden Sie etwas kaputt machen.

Zentrieren eines Divs mit unbekannter Höhe und Breite

Horizontal und vertikal. Es funktioniert mit einigermaßen modernen Browsern (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera usw.).

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

Tinker damit weiter Codepen oder auf JSBin .

Ich musste vor kurzem ein "verstecktes" div (dh display: none;) zentrieren, das ein eingebettetes Formular enthielt, das auf der Seite zentriert werden musste. Ich habe folgendes jQuery geschrieben, um das versteckte div anzuzeigen und das CSS auf die automatisch generierte Breite der Tabelle zu aktualisieren und den Rand so zu ändern, dass er zentriert wird. (Das Umschalten der Anzeige wird durch Klicken auf einen Link ausgelöst, aber es war nicht erforderlich, diesen Code anzuzeigen.)

HINWEIS: Ich teile diesen Code, weil Google mich zu dieser Stack Overflow-Lösung gebracht hat und alles funktioniert hätte, außer dass ausgeblendete Elemente keine Breite haben und erst nach ihrer Anzeige in der Größe/Mitte zentriert werden können.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Die Art, wie ich es normalerweise tue, ist die absolute Position:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Das äußere Div benötigt keine zusätzlichen Eigenschaften, damit dies funktioniert.

Für Firefox und Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Für Internet Explorer, Firefox und Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Die text-align:-Eigenschaft ist für moderne Browser optional, im Internet Explorer-Quirks-Modus ist jedoch die Unterstützung älterer Browser erforderlich.

Das ist meine Antwort.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Eine andere Lösung hierfür ist, ohne dass für eines der Elemente eine Breite festgelegt werden muss, das CSS-Attribut transform.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Der Trick ist, dass translateX(-50%) das #inner-Element 50% links von seiner eigenen Breite setzt. Sie können denselben Trick für die vertikale Ausrichtung verwenden.

Hier ist ein Fiddle , das die horizontale und vertikale Ausrichtung zeigt.

Weitere Informationen finden Sie unter Mozilla Developer Network .

Chris Coyier, der in seinem Blog ein ausgezeichneter Beitrag zum Thema 'Zentrieren im Unbekannten' geschrieben hat. Es ist eine Zusammenfassung mehrerer Lösungen. Ich habe einen gepostet, der in dieser Frage nicht veröffentlicht wurde. Es bietet mehr Browser-Unterstützung als die Flexbox-Lösung, und Sie verwenden display: table; nicht, was andere Dinge beschädigen könnte. 

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Mir ist klar, dass ich ziemlich spät dran bin, aber dies ist eine sehr beliebte Frage, und ich habe vor kurzem einen Ansatz gefunden, den ich hier nirgendwo erwähnt habe, also dachte ich, ich würde ihn dokumentieren.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

BEARBEITEN: Beide Elemente müssen dieselbe Breite haben, damit sie korrekt funktionieren.

Siehe beispielsweise this link und den folgenden Ausschnitt:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Wenn Sie viele Kinder unter einem übergeordneten Element haben, muss Ihr CSS-Inhalt wie dieses -Beispiel bei Fiddle sein.

Der HTML-Inhalt sieht so aus:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Dann sehen Sie dieses Beispiel auf der Geige .

Der einfachste Weg:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Nur horizontal zentrieren

Nach meiner Erfahrung ist es am besten, eine Box horizontal zu zentrieren, indem Sie die folgenden Eigenschaften anwenden:

Der Kontainer:

• sollte text-align: center; haben

Die Inhaltsbox:

• sollte display: inline-block; haben

Demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Siehe auch this Fiddle !

Horizontal und vertikal zentrieren

Nach meiner Erfahrung ist es am besten, eine Box sowohl vertikal als auch horizontal zu zentrieren, einen zusätzlichen Container zu verwenden und die folgenden Eigenschaften anzuwenden:

Der äußere Behälter:

• sollte display: table; haben

Der innere Behälter:

• sollte display: table-cell; haben
• sollte vertical-align: middle; haben
• sollte text-align: center; haben

Die Inhaltsbox:

• sollte display: inline-block; haben

Demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Siehe auch this Fiddle !

Hier ist, was Sie auf kürzestem Weg wünschen. 

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Sie können so etwas tun

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Dadurch wird auch der #inner vertikal ausgerichtet. Wenn Sie dies nicht möchten, entfernen Sie die Eigenschaften display und vertical-align.

Wenn die Breite des Inhalts unbekannt ist, können Sie die folgende Methode verwenden . Angenommen, wir haben diese zwei Elemente:

• .outer - volle Breite
• .inner - keine Breite gesetzt (aber eine maximale Breite könnte angegeben werden)

Angenommen, die berechnete Breite der Elemente beträgt 1000px bzw. 300px. Gehen Sie wie folgt vor:

1. Wrap .inner in .center-helper
2. .center-helper zu einem Inline-Block machen; es hat die gleiche Größe wie .inner und macht es 300px breit.
3. .center-helper 50% rechts von seinem übergeordneten Element drücken; Dies setzt seine Linke auf 500px wrt. äußere.
4. .inner 50% relativ zu seinem übergeordneten Element drücken; Damit wird seine Linke auf -150px bezogen. Der mittlere Helfer bedeutet, dass er links bei 500 - 150 = 350px steht. äußere.
5. Setzen Sie den Überlauf für .outer auf ausgeblendet, um eine horizontale Bildlaufleiste zu verhindern.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

Text ausrichten: zentrieren

Durch Anwenden von text-align: center werden die Inline-Inhalte innerhalb des Zeilenfelds zentriert. Da das innere div jedoch standardmäßig width: 100% hat, müssen Sie eine bestimmte Breite festlegen oder eine der folgenden Optionen verwenden:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margin: 0 auto

Die Verwendung von margin: 0 auto ist eine weitere Option und eignet sich eher für die Kompatibilität älterer Browser. Es arbeitet zusammen mit display: table .

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flex verhält sich wie ein Blockelement und ordnet seinen Inhalt gemäß dem Flexbox-Modell ein. Es funktioniert mit justify-content: center .

Bitte beachten Sie: Flexbox ist mit den meisten Browsern kompatibel, jedoch nicht mit allen. Unter here finden Sie eine vollständige und aktuelle Liste der Browserkompatibilität.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Verwandeln

Mit transform: translate können Sie den Koordinatenraum des visuellen CSS-Formatierungsmodells ändern. Damit können Elemente übersetzt, gedreht, skaliert und verzerrt werden. Zum horizontalen Zentrieren sind position: absolute und left: 50% erforderlich.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (veraltet)

Das Tag <center> ist die HTML-Alternative zu text-align: center . Es funktioniert mit älteren und den meisten neuen Browsern, wird jedoch nicht als bewährte Methode angesehen, da diese Funktion veraltet ist und aus den Webstandards entfernt wurde.

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Nun, ich habe eine Lösung gefunden, die vielleicht für alle Situationen geeignet ist, aber JavaScript verwendet:

Hier ist die Struktur:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Und hier ist der JavaScript-Ausschnitt:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Wenn Sie es in einem responsiven Ansatz verwenden möchten, können Sie Folgendes hinzufügen:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Sie können display: flex für Ihr äußeres Div verwenden, und um horizontal zu zentrieren, müssen Sie justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

oder besuchen Sie w3schools - CSS flex Property für weitere Ideen.

Es gab eine Option, die ich gefunden habe:

Jeder sagt zu benutzen:

margin: auto 0;

Es gibt aber noch eine andere Möglichkeit. Legen Sie diese Eigenschaft für das übergeordnete div fest. Es funktioniert jederzeit perfekt:

text-align: center;

Und sehen Sie, Kind gehen Zentrum.

Und zum Schluss CSS für Sie:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

Flex bietet mehr als 97% Browser-Support und kann der beste Weg sein, um diese Art von Problemen in wenigen Zeilen zu lösen:

#outer {
  display: flex;
  justify-content: center;
}

Diese Methode funktioniert auch gut:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Für den inneren <div> ist die einzige Bedingung, dass height und width nicht größer sein dürfen als die des Containers.

Versuchen Sie, mit herumzuspielen 

margin: 0 auto;

Wenn Sie Ihren Text auch zentrieren möchten, versuchen Sie es mit:

text-align: center;

Wenn jemand eine jQuery-Lösung für Center-Ausrichtung haben möchte, richten Sie diese Divs aus

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});

du kannst einfach flexbox wie folgt benutzen:

#outer {
  display: flex;
  justify-content: center
}

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Wenden Sie Autoprefixer für die gesamte Browserunterstützung an:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

ODER ABER

benutze transformiere :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

mit Autoprefixer:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}

CSS 3:

Sie können den folgenden Stil für den übergeordneten Container verwenden, um untergeordnete Elemente gleichmäßig horizontal zu verteilen:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Ein schönes DEMO zu den verschiedenen Werten für justify-content.

CanIUse: Browser-Kompatibilität

Versuch es!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

Ich habe Inline-Stil auf innere div angewendet. Verwende das hier. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>

#inner {
    width: 50%;
    margin: 0 auto;
}

Dies erreichen Sie mit der CSS Flexbox. Sie müssen nur drei Eigenschaften auf das übergeordnete Element anwenden, damit alles funktioniert.

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

Schauen Sie sich den Code unten an, damit Sie die Eigenschaften besser verstehen können.

Erfahren Sie mehr über CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Eine nette Sache, die ich kürzlich gefunden habe, indem ich die Verwendung von line-height + vertical-align und dem 50%-Linkstrick mischte, können Sie center eine dynamisch große Box in einer anderen dynamisch großen Box sowohl horizontal als auch vertikal mit reinem CSS verwenden. 

Beachten Sie, dass Sie Spannweiten (und inline-block) verwenden müssen, die in modernen Browsern + IE8 .HTML getestet wurden:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Siehe Beispiel hier . 

Wie wäre es mit dem untenstehenden CSS für #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Ich verwende dieses CSS meistens, um divs zu zentrieren.

Ein div in einem div zentrieren

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}

<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

Mach es einfach!

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Ich benutze nur die einfachste Lösung, aber sie funktioniert in allen Browsern:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>

Benutzen:

<div id="parent">
  <div class="child"></div>
</div>

Stil:

#parent {
   display: flex;
   justify-content: center;
}

Wenn Sie es horizontal zentrieren möchten, sollten Sie Folgendes schreiben:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

Es ist möglich mit CSS 3 flexbox . Sie haben zwei Methoden, wenn Sie die Flexbox verwenden.

1. Legen Sie das übergeordnete display:flex; fest und fügen Sie dem übergeordneten Element die Eigenschaften {justify-content:center; ,align-items:center;} hinzu.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

2. Legen Sie den übergeordneten display:flex fest und fügen Sie margin:auto; dem untergeordneten Element hinzu.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Es kann auch horizontal und vertikal mittels absoluter Positionierung zentriert werden:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

Sie können die Flexbox verwenden.

#inner {
   display: flex;
   justify-content: center;
}

Mehr dazu erfahren Sie unter diesem Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ich wollte darauf antworten, da ich bemerkte, dass niemand die Berechnungsmethode erwähnte. Die Verwendung bezieht sich auf das Div, das Sie zentrieren. Wenn Sie die Breite kennen, sagen wir, es sind 1200 Pixel, wählen Sie:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Im Grunde wird also ein linker Rand von 50% minus der Hälfte der bekannten Breite hinzugefügt.

Der bekannteste Weg, der allgemein verwendet wird und in vielen Browsern den alten verwendet wird, ist margin wie folgt:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Führen Sie den Code aus, um zu sehen, wie er funktioniert. Außerdem gibt es zwei wichtige Dinge, die Sie in Ihrem CSS nicht vergessen sollten, wenn Sie versuchen, auf diese Weise zu zentrieren: margin: 0 auto;, die es zum Div-Zentrum machen, wie gewünscht, und nicht width des Kindes vergessen , sonst wird es nicht wie erwartet zentriert! 

Wir können FLEXBOX verwenden, um dies ganz einfach zu erreichen:

<div id="outer">  
      <div id="inner">Foo foo</div>
</div>

Zentrieren Sie ein Div in einem Div.

#outer { 
 display: flex;
 justify-content: center;
}

Zentrieren Sie ein Div in einem Div. VERTIKAL:

#outer { 
  display: flex;
  align-items: center;
    }

Und um das Div vertikal und horizontal vollständig zu zentrieren:

#outer{
display: flex;
  justify-content: center;
  align-items: center;
}

Hoffe, es war hilfreich für einige auf Sie. Viel Spaß beim Codieren!

Da diese Frage immer noch viele Treffer hat, ist es eine sehr einfache und Cross-Browser-Antwort auf die horizontale Mitte, diese Regel auf das übergeordnete Element anzuwenden:

.parentBox {
 display: flex;
 justify-content: center
}

Hier ist eine weitere Möglichkeit zum horizontalen Zentrieren mit flexbox und ohne Angabe der Breite des Innenbehälters. Die Idee ist, Pseudo-Elemente zu verwenden, die den inneren Inhalt von rechts und links verschieben.

Wenn Sie flex:1 für ein Pseudoelement verwenden, werden sie die verbleibenden Leerzeichen mit gleicher Größe füllen und der innere Container wird zentriert.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Wir können dieselbe Situation auch für die vertikale Ausrichtung berücksichtigen, indem Sie einfach die Richtung der Biegung zur Säule ändern:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Dies zentriert Ihre innere Div horizontal und vertikal:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Ändern Sie nur das horizontale Ausrichten

margin: 0 auto;

und für vertikal ändern

margin: auto 0;

CSS

#inner {
  display: table;
  margin: 0 auto; 
}

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

Nachdem ich alle Antworten gelesen hatte, sah ich nicht die, die mir lieber war. So können Sie ein Element in einem anderen zentrieren. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}

Sie können diesen Code hinzufügen:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Abhängig von Ihren Umständen könnte die einfachste Lösung sein:

margin:0 auto; float:none;

Einfachste Antwort add margin: auto; nach innen.

<div class="outer">
  <div class="inner">
    Foo foo
  </div>
</div>

cSS-Code

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

Überprüfen Sie meinen Codepen-Link http://codepen.io/feizel/pen/QdJJrK

Geben Sie dem inneren width etwas div und fügen Sie in der CSS-Eigenschaft margin:0 auto; hinzu.

Benutzen:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>

Ja, das ist ein kurzer und sauberer Code für das horizontale Ausrichten. Ich hoffe, Ihnen gefällt dieser Code.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

Verwenden Sie den folgenden Code.

HTML

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}

Ich weiß, dass ich mit der Beantwortung dieser Frage ein bisschen zu spät bin, und ich habe mich nicht die Mühe gemacht, jede einzelne Antwort zu lesen, daher kann dies ein Duplikat sein . Hier ist meine Einstellung :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

Verwenden Sie diesen Code:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

Sie können es mit der Flex-Box kaufen, die heutzutage eine gute Technik ist. Für die Verwendung der Flex-Box sollten Sie display: flex; und align-items: center; Ihrem übergeordneten Element oder #outer div-Element geben. Der Code sollte so aussehen:

#outer {
  display: flex;
  align-items: center;
}

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Dies sollte Ihr Kind oder #innerdiv horizontal zentrieren. Sie können jedoch keine Änderungen sehen. Da unser #outer div keine Höhe oder mit anderen Worten hat, wird seine Höhe auf auto gesetzt, sodass es dieselbe Höhe wie alle untergeordneten Elemente hat. Nach ein wenig visuellem Styling sollte der Ergebniscode folgendermaßen aussehen:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Sie können sehen, dass #inner div jetzt zentriert ist. Flex-Box ist die neue Methode zum Positionieren von Elementen in horizontalen oder vertikalen Stapeln mit CSS. Die Kompatibilität mit globalen Browsern beträgt 96%. Sie können es also frei verwenden. Wenn Sie mehr über Flex-Box erfahren möchten, besuchen Sie CSS-Tricks , dann ist dies meiner Meinung nach der beste Ort, um Flex-Box zu lernen.

Es ist so einfach.

Entscheiden Sie einfach, welche Breite Sie dem inneren div zuweisen möchten, und verwenden Sie das folgende CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}

Dies wird Ihren #inner sicher sowohl horizontal als auch vertikal zentrieren. Dies ist auch in allen Browsern kompatibel. Ich habe nur extra Styling hinzugefügt, nur um zu zeigen, wie es zentriert ist.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Wenn Sie es jedoch nur horizontal ausrichten möchten, kann dies Ihnen helfen.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Sie können nur eine Codezeile verwenden, nämlich text-align:center.

Hier ist ein Beispiel:

#inner {
  text-align:center;
  }

<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

Eine der einfachsten Möglichkeiten ist, display: flex zu verwenden. Das äußere Div muss nur eine Anzeige-Flex haben, und das innere muss margin: 0 auto sein, um es horizontal zu zentrieren.

Um vertikal zu zentrieren und nur ein div innerhalb eines anderen div zu zentrieren, sehen Sie sich die Kommentare der .inner-Klasse unten an

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}

<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}

Einer der einfachsten Wege ...

<!DOCTYPE html> 
<html>
 <head>
    <style>
        #outer-div {
        width: 100%; 
        text-align: center;
        background-color: #000 
        }
        #inner-div {
        display: inline-block; 
        margin: 0 auto;
        padding: 3px;
        background-color: #888
        }
    </style>
 </head>
 <body>
    <div id ="outer-div" width="100%">
        <div id ="inner-div"> I am a easy horizontally centered div.</div>
    <div>
 </body>
</html>

Es tut mir leid, aber dieses Baby aus den 1990er Jahren hat gerade für mich ARBEITET:

<div id="outer">  
  <center>Foo foo</center>
</div>

Bin ich wegen dieser Sünde zur Hölle?

Das Beste, was ich in meinen verschiedenen Projekten verwendet habe, ist 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Geigenverbindung

Wir könnten die nächste CSS-Klasse verwenden, die die vertikale und horizontale Zentrierung jedes Elements gegen das übergeordnete Element zulässt:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML:

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

Am besten verwenden Sie eine Tabellenzellendarstellung (inner), die genau nach einem div mit der Anzeigetabelle (außen) kommt und die vertikale Ausrichtung für das innere div (mit Tabellenzellendarstellung) und jedes Tag, das Sie im inneren div verwenden, festlegen in der Mitte von div oder page.

Hinweis: Sie müssen eine angegebene Höhe auf die äußere Höhe setzen

Dies ist der beste Weg, den Sie ohne relative oder absolute Position kennen, und Sie können ihn in jedem Browser als gleich verwenden.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

Anstelle mehrerer Wrapper und/oder automatischer Ränder funktioniert diese einfache Lösung für mich:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Dadurch wird das div in die Mitte der Ansicht (vertikal und horizontal) gestellt, die Größe wird angepasst und die Größe wird eingestellt, das Hintergrundbild (vertikal und horizontal) wird zentriert, der Text wird zentriert (horizontal), und div wird in der Ansicht und über dem Inhalt beibehalten. Einfach in das HTML body einfügen und genießen.

Probieren Sie es aus:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}

das hat für mich funktioniert:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

In diesem Code bestimmen Sie die Elementbreite.

Ähnliches finde ich mit margin-left, kann aber auch left sein.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}

Sie können ein weiteres Div mit der gleichen Größe von #inner hinzufügen und es um -50% (die Hälfte der Breite von #inner) und #inner um 50% nach links verschieben. Entschuldigung für mein Englisch

#inner {
  position: absolute;
  left: 50%;
}

#inner > div {
  position: relative;
        left: -50%;
  }

<div id="outer">  
  <div id="inner"><div>Foo foo</div></div>
</div>

Fügen Sie Ihrem inneren div CSS hinzu. Setze margin: 0 auto und setze seine Breite auf weniger als 100%, was der Breite des äußeren Div entspricht.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

Dies ergibt das gewünschte Ergebnis.

#inner {
  width: 50%;
  margin: 0 auto;
}

Einfach Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

text-align:center; zu übergeordnetem div hinzufügen 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

oder 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

Die Hauptattribute zum Zentrieren des div sind margin: auto und width: gemäß den Anforderungen:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

für normale Sache, wenn Sie div statische Weise verwenden

wenn Sie möchten, dass div zentriert ist, wenn div zu seinem übergeordneten Element absolut ist, ist dies ein Beispiel:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}

Sie können es auf andere Weise tun. Siehe die folgenden Beispiele:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

Versuche dies:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

Zunächst einmal: Sie müssen dem zweiten Div eine Breite zuweisen:

Zum Beispiel:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

Wenn Sie keine Breite angeben, wird die gesamte Breite der Linie verwendet.