Wie zentriere ich das absolute Div mit CSS horizontal?

Ich habe ein Div und möchte, dass es horizontal zentriert wird - obwohl ich es gebe, ist margin:0 auto;es nicht zentriert ...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

Sie müssen eingestellt left: 0und right: 0.

Dies gibt an, wie weit die Randkanten von den Seiten des Fensters versetzt werden sollen.

Wie 'oben', gibt jedoch an, wie weit die rechte Randkante einer Box zur [links / rechts] der [rechten / linken] Kante des Blocks der Box versetzt ist.

Quelle: http://www.w3.org/TR/CSS2/visuren.html#position-props

Hinweis: Das Element muss eine kleinere Breite als das Fenster haben, da es sonst die gesamte Breite des Fensters einnimmt.

Wenn Sie Medienabfragen verwenden könnten, um einen Mindestrand anzugeben , und dann autofür größere Bildschirmgrößen zu wechseln.

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Dies funktioniert in IE8 nicht, kann jedoch in Betracht gezogen werden. Dies ist vor allem dann hilfreich, wenn Sie keine Breite angeben möchten.

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Obwohl die obigen Antworten korrekt sind, aber um es Neulingen einfach zu machen, müssen Sie nur den linken und rechten Rand festlegen. Der folgende Code führt dies aus, sofern die Breite festgelegt und die Position absolut ist:

margin: 0 auto;
left: 0;
right: 0;

Demo:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }

<div class="centeredBox">Centered Box</div>

Flexbox? Sie können Flexbox verwenden.

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

So einfach, verwenden Sie nur den Rand und die Eigenschaften links und rechts:

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

Weitere Informationen finden Sie in diesem Tipp => So setzen Sie das div-Element im HTML-Obinb-Blog auf zentriert

Hier ist ein Link, bitte benutze diesen, um das Div in der Mitte zu machen, wenn die Position absolut ist.

HTML:

<div class="bar"></div>

CSS:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

Beispiel jsfiddle

Sie können nicht margin:auto;auf position:absolute;Elemente, nur um es zu entfernen , wenn Sie es nicht brauchen, aber wenn Sie das tun, könnten Sie verwenden left:30%;((100% -40%) / 2) und Medien - Anfragen für die Maximal- und Minimalwerte:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}