Wyśrodkuj na absolutnie pozycjonowanym DIV


93
div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Element div znajduje się na górze, ale nie mogę go wyśrodkować za pomocą <center>lub margin: 0 auto;

Odpowiedzi:


152

Twój problem może zostać rozwiązany, jeśli podasz divstałą szerokość w następujący sposób:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

1
Nie wiem, dlaczego o tym nie pomyślałem, chociaż cały czas używamy tej samej techniki do centrowania w pionie… W każdym razie dzięki, zaoszczędziłeś mi dużo czasu.
Aayush

1
co jeśli użytkownik przewinął pionowo w dół, div pojawia się na górze strony, podczas gdy powinien pojawić się w widocznym obszarze
PUG

Wyświetlam miniatury dynamicznie zreszowanych obrazów w moim elemencie div overlay, więc nie znam szerokości.
PUG

4
to jest tylko obejście, stackoverflow.com/questions/1776915/ ... wydaje się być rozwiązaniem
PUG

1
To nie jest dobra odpowiedź. Inny typ multimediów nie obsługuje tego fragmentu.
Sushan

98
div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

3
Jak to działa? Czy możesz wyjaśnić, dlaczego Twoja odpowiedź jest ważna?
afuzzyllama

1
Naprawdę podoba mi się ta metoda w 99% przypadków, nie musisz zajmować się dopełnieniem, obramowaniem itp. Nigdy nie widziałem, aby to zawodziło, następnym razem podaj przykład, jeśli zawodzi.
Dan

1
Fajną rzeczą w tym rozwiązaniu jest to, że działa również z procentami, ale nie jestem pewien, czy jest kompatybilny z
różnymi

1
Łał. Nie spodziewałem się, że to zadziała, ale zadziałało dla mnie jak urok
Awais Umar.

4
Zgadzam się, że to powinna być prawidłowa odpowiedź, a -200px margines krzyczy do mnie.
Mani5556

37

Wiem, że spóźniłem się na imprezę, ale pomyślałem, że udzielę odpowiedzi tutaj osobom, które muszą ustawić pozycję absolutną w poziomie, gdy nie znasz dokładnej szerokości.

Spróbuj tego:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Tę samą technikę można również zastosować, gdy potrzebujesz wyrównania w pionie, po prostu dostosowując właściwości w następujący sposób:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

1
Whaaat. To jest niesamowite! Czy mógłbyś wyjaśnić, jak to działa? Edycja: Trochę polował i wygląda na to, że po lewej: 50% przesuwa lewą lokalizację div do środka, co nie jest tak naprawdę środkiem. Ale translateX przesuwa go z powrotem o 50% szerokości zawartości
azizj1

2
Pozycjonowanie bezwzględne będzie pozycjonowane od lewego górnego rogu elementu. Użycie translate spowoduje przesunięcie go do kwoty w stosunku do jej rozmiaru.
Michael Giovanni Pumo

3
Michael, chciałem tylko, żebyś wiedział, że nie spóźniłeś się na imprezę ... a dla tych, którzy nie wiedzą: transform: translate (-50%, -50%); wykonuje centrowanie w pionie i poziomie za pomocą 1 linii
Marvel Moe

4

Aby wyśrodkować go w pionie i poziomie, wykonaj następujące czynności:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

0

Jeśli konieczne jest, aby mieć względną szerokość (w procentach), możesz umieścić swój element div w pozycji bezwzględnej:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Pamiętaj, że aby pozycjonować element absolutnie, element nadrzędny musi być pozycjonowany względnie.


0

Miałem ten sam problem, a moim ograniczeniem było to, że nie mogę mieć wstępnie zdefiniowanej szerokości. Jeśli twój element nie ma stałej szerokości, spróbuj tego

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

następnie zmodyfikuj swój kod HTML, aby wyglądał tak

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

0

Możesz też użyć jednostek względnych, np

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}


-22

Tak:

div#thing { text-align:center; }

5
Spowoduje to wyrównanie zawartości w div. Nie wyrówna elementu div na środku strony. Nie wyrówna również absolutnie pozycjonowanego elementu div w żaden inny sposób niż zawarta w nim zawartość, która jest częścią przepływu dokumentu.
CarterMan
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.