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;

html css xhtml

— Steve
źródło

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

— JacobE
źródło

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

— Matheus Oliveira
źródło

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

— Michael Giovanni Pumo
źródło

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

— Armin
źródło

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.

— dalvallana
źródło

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>

— Usman Shaukat
źródło

0

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

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

— Aliaksei
źródło

0

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

Rozwiń fragment

— panwar
źródło

-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