Wie zentriere ich das absolute Div mit CSS horizontal?

176

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;
}
CoreDo
quelle
Mögliches Duplikat von Wie
LoganMzz
@LoganMzz ist es nicht, weil diese Frage ihre Breite bekannt hat.
Davbog

Antworten:

407

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>

thgaskell
quelle
38
Hinweis: widthist ein Muss!
Ijas Ameenudeen
2
Ja. Dies ist richtig ... mit einem "text-align: center;" und ein "left: 0; right: 0;" ermöglicht es Ihnen, ein Div absolut zu positionieren, während Sie es horizontal zentriert halten.
Sterling Bourne
3
@AlexG Ich habe gerade die Geige in IE11 geladen und es funktioniert. Könntest Du das erläutern?
Brian Webster
1
@AlexG es funktioniert in IE11, aber es funktioniert nicht , wenn Sie keine Breite deklarieren . Ich hatte das gleiche Problem. Sie müssen eine Breite verwenden, wie im Beispiel gezeigt.
Panama Jack
1
auch benötigt, margin: autodamit es in unserem Fall
funktioniert
123

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%);
}
Adel
quelle
Das würde wahrscheinlich von den Anforderungen seines Projekts abhängen.
Kris Selbekk
3
Zu diesem Zeitpunkt müsste es auch noch eine Regel mit dem Präfix -webkit- geben, damit sie in Safari funktioniert.
Shikkediel
Leider wendet es die Transparenz des umgebenden Div irgendwie auch auf den Text im Inneren an.
dnl.re
1
Dies ist definitiv die Antwort. Für mich ist es ein absolutes No-Go, die Breite speziell einzustellen.
Mike
14

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>

Meta Pakistanisch
quelle
1
Dies funktionierte perfekt für absolute Bilder in einer Reihe von Bootstrap-Spalten
ZachNag
5

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>

Ronnie Royston
quelle
Dies funktionierte wirklich wunderbar für meinen einzigartigen Fall. left: 0; right: 0;erweitert auf 100%, was keine Option war, da das untergeordnete Element eine Hintergrundfarbe hatte und left: 50%; transform: translateY(-50%);nicht funktionierte, da das untergeordnete Element auf eine Breite von 50% beschränkt war. Dies war die einzige Lösung, bei der die flexiblen Dimensionen des Kindes beibehalten wurden (nur auf die Browserunterstützung beschränkt). Vielen Dank!
Ben Dyer
3
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
Z. Rahman Raju
quelle
0

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

Amit Kumar
quelle
-1

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

}
Leonard Pauli
quelle