Wyśrodkuj na absolutnie pozycjonowanym DIV

Question 1

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;

Question 2

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

Question 3

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

Question 4

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

Question 5

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

Question 6

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.

Question 7

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>

Question 8

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

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

Question 9

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

Rozwiń fragment

Question 10

Tak:

div#thing { text-align:center; }

Answer 1

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;

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

PUG

Answer 6

4

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

PUG

Answer 7

1

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

Sushan

Answer 8

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

Answer 9

3

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

afuzzyllama

Answer 10

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

Answer 11

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

Answer 12

1

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

Awais Umar.

Answer 13

4

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

Mani5556

Answer 14

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

Answer 15

1