Richten Sie ein Div auf den Mittelpunkt aus

Das hat immer für mich funktioniert.

Wenn Sie eine feste Breite für Ihr DIV und den richtigen DOCTYPE festgelegt haben, versuchen Sie dies

div {        
  margin-left:auto;
  margin-right:auto;
}

Hoffe das hilft.

Die übliche Technik dafür ist margin:auto

Alte IE hat dies jedoch nicht. Daher fügt man normalerweise text-align: center zu einem äußeren Element hinzu. Sie würden nicht glauben, dass das funktionieren würde, aber die gleichen IEs, die auto ignorieren, wenden die Textausrichtungsmitte falsch an, um innere Elemente der Ebene zu blockieren.

Und das macht eigentlich keinen echten Schwimmer.

Folgende Lösung hat bei mir funktioniert.

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

gleitende divs zu center "funktioniert" mit der Kombination aus display: inline-block und text-align: center.

Versuchen Sie, die Breite des äußeren div zu ändern, indem Sie das Fenster dieses jsfiddle ändern.

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

und die css:

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid Lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}

Bei einer meiner Websites handelt es sich um ein Div, dessen Größe variabel ist. Sie werden es nicht im Voraus wissen. es ist ein äußeres div mit 2 verschachtelten divs, das äußere div hat die gleiche Breite wie das erste verschachtelte div, also den Inhalt, und das zweite verschachtelte div rechts unterhalb des Inhalts ist die Bildunterschrift, die zentriert werden muss. Da die Breite nicht bekannt ist, verwende ich jQuery, um sie entsprechend anzupassen.

also meine html ist dies

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

und dann zentriere ich die Bildunterschriften in jQuery so

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

Verwenden Sie "spacer" divs, um das div zu umgeben, das Sie zentrieren möchten. Funktioniert am besten mit einem fließenden Design. Geben Sie den Abstandhaltern unbedingt die Höhe an, sonst funktionieren sie nicht.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

Das hat für mich funktioniert ..

div.className {
display: inline-block;
margin: auto;
}

das könnte dir helfen ..: D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

Verschieben Sie das div im Hintergrund auf die maximale Breite, stellen Sie ein div ein, das nicht transparent ist, und zentrieren Sie es mit dem Randbereich auto.

Nein, ist es nicht.

Sie können entweder eine Inhaltsblase auf der rechten Seite eines Elements (float: left) oder auf der linken Seite eines Elements (float: right) haben. Es ist nicht vorgesehen, dass die Inhalte auf beiden Seiten aufgeblasen werden.

das funktioniert gut

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

Dies passt auch mit adaptiven Layouts gut an.

CSS-Beispiel wäre:

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}

Das hat bei mir funktioniert. 

Ich habe zweimal eine ungeordnete Liste auf meiner Seite eingefügt. Eine div-Klasse = "menu" id = "vertical" die andere zu zentrierende war div class = "menu" id = "horizontal". Da die Liste nach links verschoben wurde, brauchte ich ein inneres Div, um sie zu zentrieren. Siehe unten.

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }