web-dev-qa-db-ger.com

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 margin:0 auto; es ist 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;
}
168
CoreDo

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

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

Entspricht 'oben', gibt jedoch an, wie weit der rechte Rand einer Box vom [links/rechts] des [rechts/links] Randes des die Box enthaltenden Blocks abweicht.

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

Hinweis: Das Element muss eine Breite kleiner als das Fenster haben, sonst nimmt es die gesamte Breite des Fensters ein Fenster.

Wenn Sie Medienabfragen verwenden könnten, um einen Rand minimum anzugeben, und dann für größere Bildschirmgrößen zu auto übergehen.


.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>
387
thgaskell

Dies funktioniert nicht in IE8, ist jedoch möglicherweise eine zu erwägende Option. Dies ist in erster Linie nützlich, wenn Sie keine Breite angeben möchten.

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

Die obigen Antworten sind zwar richtig, aber um es Neulingen einfach zu machen, müssen Sie nur den linken und rechten Rand einstellen. Der folgende Code wird dies tun, vorausgesetzt, dass width is set und position absolut sind:

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>
13
Meta Pakistani

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>
5
Ron Royston
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
3
Z. Rahman Raju

so einfach, benutze nur margin und left, right Eigenschaften:

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

Sie können mehr in diesem Tipp sehen => Wie man das div-Element so einstellt, dass es im HTML-Obinb-Blog zentriert

2
Neko

Hier ist ein Link, bitte benutzen Sie diesen, um das Div in die Mitte zu stellen, 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

0
Amit Kumar