Jak wyśrodkować absolutny div w poziomie za pomocą CSS?


177

Mam element div i chcę, aby był wyśrodkowany w poziomie - chociaż podam, margin:0 auto;że nie jest wyśrodkowany ...

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


@LoganMzz to nie dlatego, że to pytanie ma znaną szerokość.
Davbog,

Odpowiedzi:


408

Musisz ustawić left: 0i right: 0.

Określa, jak daleko przesunąć krawędzie marginesów od boków okna.

Podobnie jak „góra”, ale określa, jak daleko prawa krawędź marginesu pola jest odsunięta w stosunku do [lewej / prawej] [prawej / lewej] krawędzi bloku zawierającego pole.

Źródło: http://www.w3.org/TR/CSS2/visuren.html#position-props

Uwaga: element musi mieć szerokość mniejszą niż okno, w przeciwnym razie zajmie całą szerokość okna.

Jeśli możesz użyć zapytań o media, aby określić minimalny margines, a następnie przejść do autodla większych rozmiarów ekranu.


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


38
Uwaga: widthjest koniecznością!
Ijas Ameenudeen

2
Tak. To jest poprawne ... używając "text-align: center;" i „w lewo: 0; w prawo: 0;” pozwoli ci na bezwzględne pozycjonowanie div, zachowując je w poziomie.
Sterling Bourne

3
@AlexG Właśnie załadowałem skrzypce w IE11 i działa. Możesz wyjaśnić?
Brian Webster

1
@AlexG działa w IE11, jednak nie zadziała, jeśli nie zadeklarujesz szerokości . Miałem ten sam problem. Musisz użyć szerokości, jak pokazano w przykładzie.
Panama Jack,

1
potrzebował również margin: auto, aby działał w naszym przypadku
Crashalot

124

To nie działa w IE8, ale może być opcją do rozważenia. Jest to przydatne przede wszystkim, jeśli nie chcesz określać szerokości.

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

To prawdopodobnie zależałoby od wymagań jego projektu.
Kris Selbekk,

3
W tym momencie nadal musiałaby istnieć reguła z prefiksem -webkit-, aby działała w Safari.
Shikkediel

Niestety w jakiś sposób stosuje przezroczystość otaczającego div również do tekstu w środku ..
dnl.re

1
To jest zdecydowanie odpowiedź. Dla mnie ustawienie konkretnej szerokości jest absolutnie niemożliwe.
Mike,

14

Chociaż powyższe odpowiedzi są poprawne, ale aby ułatwić początkującym pracę, wystarczy ustawić margines, lewy i prawy. następujący kod zrobi to pod warunkiem, że szerokość jest ustawiona, a pozycja jest bezwzględna:

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

Próbny:

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


1
To działało idealnie w przypadku obrazów absolutnych w rzędzie kolumn typu bootstrap
ZachNag

5

Flexbox? Możesz użyć flexbox.

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


To faktycznie działało pięknie w moim wyjątkowym przypadku. left: 0; right: 0;rozszerzony do 100%, co nie było opcją, ponieważ element potomny miał kolor tła, orazleft: 50%; transform: translateY(-50%); nie działał, ponieważ ograniczało to dziecko do 50% szerokości. Było to jedyne rozwiązanie, które zachowało elastyczne wymiary dziecka (ograniczone tylko do obsługi przeglądarki). Dzięki!
Ben Dyer,



0

Oto link, użyj go, aby ustawić div w środku, jeśli pozycja jest bezwzględna.

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

Przykład jsfiddle


-1

Nie możesz używać margin:auto;na position:absolute;elementach, po prostu usuń go, jeśli go nie potrzebujesz, jednak jeśli to zrobisz, możesz użyć left:30%;((100% -40%) / 2) i zapytań o media dla wartości maksymalnych i minimalnych:

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

}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.