Wie horizontal-center a <div>?

Wenn Sie nicht wollen, um eine Feste Breite auf der inneren div Sie könnte so etwas tun:

CSS:

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

#inner {
  display: inline-block;
}

HTML:

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

Macht, dass das innere div in ein inline-element, das kann sein, zentriert mit text-align.

Nehme an, dass dein div ist 200px Breite:

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

Stellen Sie sicher, dass das übergeordnete element ist positioniert D. H. relative, fixed, absolute, oder klebrig.

Wenn Sie nicht wissen, die Breite des div, die Sie verwenden können transform:translateX(-50%); statt der negativen Marge.

https://jsfiddle.net/gjvfxxdj/

Einige Poster erwähnt haben die CSS 3-Wege-center mit display:box.

Diese syntax ist veraltet und sollte nicht mehr verwendet werden. [Siehe auch dieser Beitrag].

Also nur der Vollständigkeit halber, hier ist die neueste Art und Weise zu zentrieren, CSS 3 mit der Flexible Box Layout Module.

Also, wenn Sie einfache Formatierungen wie:

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

...und Sie zentrieren wollen Ihre Artikel innerhalb der box, hier ist was Sie brauchen, auf das Eltern-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 */
}

CSS:

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

HTML:

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

Wenn Sie brauchen, um die Unterstützung für ältere Browser, die Sie verwenden eine ältere syntax für flexbox hier ein guter Ort, um zu schauen.

Zentrieren einer div unbekannter Höhe und Breite

Horizontal und vertikal. Es funktioniert mit halbwegs modernen Browsern (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera, etc.)

CSS:

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

HTML:

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

Basteln Sie weiter auf Codepen oder auf JSBin.

CSS3 box-align-Eigenschaft

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

Vor kurzem hatte ich zum Zentrum einer "versteckten" div (ie, display:none;), die hatte eine form vorgelegt, die benötigt werden, um auf der Seite zentriert werden. Ich habe die folgende jQuery-zum anzeigen der versteckten div & aktualisieren Sie dann die CSS, um die automatisch generierte Breite der Tabelle, und ändern Sie den Rand um es. (Die Anzeige aktiv ist, ausgelöst durch das klicken auf einen link, aber dieser code war nicht notwendig, um anzuzeigen.)

HINWEIS: ich bin teilen Sie diesen code denn Google brachte mich zu dieser Stack-Overflow-solution & alles funktioniert hätte, außer, dass die versteckten Elemente haben keine Breite & kann nicht geändert werden/zentriert werden, bis Sie angezeigt werden.

JS:

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

HTML:

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

Für Firefox und Chrome:

HTML:

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

Für Internet Explorer, Firefox und Chrome:

HTML:

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

Den text-align: Eigenschaft ist optional für moderne Browser, aber es ist notwendig, im Internet Explorer Quirks-Modus für ältere Browser unterstützen.

Andere Lösung für dieses, ohne die Breite eines der Elemente mit der CSS-3 - transform Attribut.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

Der trick ist, dass translateX(-50%) legt die #inner element 50 Prozent auf die Links von Ihrer eigenen Breite. Sie können den gleichen trick für die vertikale Ausrichtung.

Hier ein Geige zeigt die horizontale und vertikale Ausrichtung.

Mehr Informationen auf Mozilla Developer Network.

Ich weiß, ich bin ziemlich spät auf das Spiel, aber das ist eine sehr beliebte Frage, und vor kurzem fand ich einen Ansatz habe ich noch nicht gesehen erwähnt überall hier, so dass ich dachte, ich würde es zu dokumentieren.

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

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

EDIT: beide Elemente müssen die gleiche Breite, um richtig funktionieren zu können.

Zentrierung nur horizontal

Meiner Erfahrung, der beste Weg, um Mitte ein Feld horizontal ist, gelten die folgenden Eigenschaften:

Der container:

• sollte text-align: center;

Das Feld Inhalt:

• sollte display: inline-block;

Demo:

CSS:

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

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

HTML:

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

Siehe auch diese Geige!

Zentrierung horizontal & vertikal

Meiner Erfahrung, der beste Weg, um die center-box beide vertikal und horizontal, ist die Verwendung eines zusätzlichen container und anwenden die folgenden Eigenschaften:

Der äußere Behälter:

• sollte display: table;

Der innere container:

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

Das Feld Inhalt:

• sollte display: inline-block;

Demo:

CSS:

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

HTML:

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

Siehe auch diese Geige!

Wenn die Breite der Inhalte ist unbekannt, Sie können die folgende Methode verwenden. Nehmen wir an, wir haben diese zwei Elemente:

• .outer -- volle Breite
• .inner -- keine Breite gesetzt (aber eine max-width angegeben werden kann)

Nehme an, dass die berechnete Breite der Elemente sind 1000px und 300px beziehungsweise. Gehen Sie wie folgt vor:

1. Wrap .inner innen .center-helper
2. Machen .center-helper ein inline-block; wird es die gleiche Größe wie .inner macht es 300px breit.
3. Push .center-helper 50% rechts relativ zum übergeordneten Objekt; dieser legt seine linke auf 500 Pixel wrt. äußeren.
4. Push .inner 50% übrig, die relativ zum übergeordneten Objekt; dieser legt seine linke an -150px wrt. center helper was bedeutet, dass Ihre Links bei 500 - 150 = 350px wrt. äußeren.
5. Set overflow .outer zu versteckt, um zu verhindern, dass die horizontale Bildlaufleiste.

Demo:

CSS:

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

HTML:

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

Hier ist, was Sie wollen, in kürzester Weg.

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 % );
}

Können Sie display: flex für das äußere div und horizontal zentrieren, müssen Sie justify-content: center

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

oder besuchen Sie w3schools - CSS-flex-Eigenschaft für mehr Ideen.

Flex haben Sie mehr als 97% browser-support-Abdeckung und vielleicht der beste Weg, um zu lösen diese Art von Problemen innerhalb von wenigen Zeilen:

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

Eine option gäbe, das ich gefunden habe:

Jeder sagt zu verwenden:

margin: auto 0;

Aber es ist eine weitere option. Setzen Sie diese Eigenschaft für das übergeordnete div. Es
funktioniert perfekt, jederzeit:

text-align: center;

Und sehen, Kind gehen Zentrum.

Und schließlich 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 */
}

Versuchen, um das Spiel mit

margin: 0 auto;

Wenn Sie zentrieren möchten Sie Ihren text zu, versuchen Sie es mit:

text-align: center;

können Sie einfach verwenden flexbox wie diese:

CSS:

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

HTML:

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

Gelten Autoprefixer für alle browser-Unterstützung:

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

ODER SONST

verwenden verwandeln:

CSS:

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

HTML:

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

Können Sie die folgenden Stil für den übergeordneten container zu verteilen untergeordneten Elemente gleichmäßig horizontal:

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

Einen schönen DEMO über die verschiedenen Werte für justify-content.

CanIUse: Browser-Kompatibilität

Versuchen Sie es!:

CSS:

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

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

HTML:

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

Können Sie erreichen dies mit der CSS-Flexbox -. Sie müssen nur gelten 3 Eigenschaften des übergeordneten Elements, um alles zu arbeiten.

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

Haben Sie einen Blick auf den code unten, so werden Sie verstehen, die Eigenschaften viel besser.

Erfahren Sie mehr über CSS Flexbox

CSS:

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

HTML:

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

Wie Sie über den untenstehenden CSS-Code für #inner div:

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

Ich benutze meistens diese CSS-divs zu zentrieren.

Kann es auch horizontal zentriert und vertikal mit absoluter Positionierung, wie diese:

#outer{
    position: relative;
}

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

Verwenden:

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

Stil:

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

Wenn Sie wollen, um es horizontal, schreiben Sie wie folgt:

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

Benutze ich nur die einfachste Lösung, aber es 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>

Die besten bekannte Art und Weise, die weit verbreitet ist und die Arbeit in viele Browser einschließlich der alten, ist mit margin wie folgt:

CSS:

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

HTML:

<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, um zu sehen, wie es funktioniert, auch dort gibt es 2 wichtige Dinge, die Sie shoyuldn nicht vergessen in der CSS, wenn Sie versuchen zu zentrieren, auf diese Weise: margin: 0 auto; machen, dass es das div center wollte, und vergessen Sie nicht width des Kindes, sonst wird es nicht zentriert zu bekommen als erwartet!

Die besten, die ich in meinen verschiedenen Projekten 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%);
}

fiddle link

Sie können es kaufen, mit flex-box-Hexe ist eine gute Technik in diesen Tagen.
Für die Verwendung von flex-box sollten Sie display: flex; und align-items: center; zu Ihren Eltern oder #outer div-element. Der code sollte wie folgt sein :

CSS:

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

HTML:

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

Dieser sollte in der Mitte Ihr Kind oder #inner div horizontal. Aber man kann nicht wirklich sehen, keine änderungen. Weil unsere #outer div hat keine Höhe-oder in anderen Worten, seine Höhe auf auto gesetzt ist, damit es die gleiche Höhe hat, wie alle seine Kind-Elemente. So nach ein wenig von visual-styling, das Ergebnis-code sollte wie folgt sein :

CSS:

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

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

HTML:

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

Sehen Sie #inner div ist zentriert. Flex-box ist die neue Methode der Positionierung von Elementen in horizontale oder vertikale stacks mit CSS und es hat 96% der weltweiten Browser-Kompatibilität. So sind Sie frei, es zu benutzen und, wenn Sie möchten, um mehr zu erfahren über Flex-box besuchen CSS-Tricks Artikel, dass ist der beste Ort, um zu lernen, mit Flex-box meiner Meinung nach.

CSS:

.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}

HTML:

<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>

Je nach den Umständen, die einfachste Lösung könnte sein:

margin:0 auto; float:none;

Nach der Lektüre alle Antworten, die ich nicht sehen die, die ich bevorzuge. Dies ist, wie können Sie center ein element in ein anderes.

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

CSS

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

HTML

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

Können Sie fügen Sie diesen code:

CSS:

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

HTML:

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

Können Sie eine Zeile code, nur text-align:center.

Hier ein Beispiel:

CSS:

#inner {
  text-align:center;
  }

HTML:

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

Verwenden Sie diesen code:

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

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

Diese zentralisiert Ihre innere div horizontal und vertikal:

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

Nur für horizontale Ausrichtung, ändern

margin: 0 auto;

und für vertikale, ändern

margin: auto 0;

Geben einige width auf die innere div und fügen Sie margin:0 auto; im CSS-Eigenschaft.

Eine der einfachsten Möglichkeiten, wie Sie dies tun können, ist durch die Verwendung display: flex. Das äußere div braucht nur display flex, und die inneren Bedürfnisse margin: 0 auto um es horizontal zentriert.

Zentrieren vertikal und gerade Mitte ein div in einem anderen div, schauen Sie bitte in die Kommentare .die innere Klasse unter

CSS:

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

HTML:

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

Hinzufügen text-align:center; zu übergeordneten div

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

oder

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

https://jsfiddle.net/f8su1fLz/

Können Sie es tun in eine andere Weise. Siehe die Beispiele unten:

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

Der beste Weg ist mit table-cell-display (innen), die genau nach einem div mit der display-Tabelle (außen) und senkrecht ausrichten für den inneren div (mit table-cell display) und jeden tag, die Sie in das innere div-Element platziert in der Mitte des div oder Seite.

Hinweis: Sie müssen eine VORGEGEBENE Höhe, die zu den äußeren

Es ist der beste Weg, Sie wissen, ohne position relative oder absolute, und man kann es in jedem browser gleich.

CSS:

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


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

HTML:

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

Einfach Margin:0px auto:

CSS:

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

HTML:

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

Erstens: Sie müssen eine Breite des zweiten div:

Beispiel:

HTML -

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

CSS:

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

Beachten Sie, dass, wenn Sie nicht geben es eine Breite, nimmt es die ganze Breite der Zeile.

Versuchen:

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

dieser arbeitete für mich:

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

In diesem code, Sie bestimmen die Breite des Elements.

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

für eine normale Sache, wenn man mit div-statische Weise

wenn Sie möchten, div werden in zentriert bei div absolut zu seinen Eltern hier ist ein Beispiel:

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

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

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

Teile ich diese Antwort für die Designer, die möchten, richten Ihre Inhalte sowohl horizontal als auch vertikal. Oder Sie können sagen, in der Mitte des web-Seite.
Bitte gehen Sie auf diese Website, um die Datei herunterzuladen.

CSS-Code

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px; 
          margin: 0 auto; 
          background: brown; 
          color: red;
    }
 
</style>

  </head>

  <body>

    <div class="outer">
      <div class="inner">This DIV is centered</div>
    </div>

  </body>
</html>

plz versuchen, diese arbeiten ohne html-center-tag