Wyśrodkowanie diva w divie.. NIE DZIAŁA

Question

Witam

Ustawiłem "position: absolute;" dla jednego DIV2 względem DIV1, który ma "position: relative;". Chciałem wyśrodkować DIV2 względem DIV1, czyli można powiedzieć, że względem strony, ale problem polega na tym, że parametry: "left i top" wyśrodkowują DIV2 od lewej górnej krawędzi a nie środka DIV2. Czy da się to jakoś zmienić??

 

Answer 1

Używając Twojego sposobu musiał byś pamiętać o tym, by odjąć od top i left, 1/2 odpowiednio wysokości i szerokości elementu centrowanego (jeżeli ma on stałą wysokość, możesz ten efekt uzyskać przy pomocy funkcji calc(). Natomiast polecam użyć flex'a do rozwiązania problemu:

.div1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

Po dodaniu tych styli do div1, div2 powinien wycentrować się automatycznie (niezależnie od rozmiaru).

Comments

zapomniałem dodać, że DIV1 jest zdjęciem, a DIV2 nie ma określonych wymiarów. Generalnie DIV2 (ma być przyciskiem). Po dodaniu tych styli, DIV2 wyśrodkował się, ale jego width: jest 100% (a po zmianie na stałą wielkość znowu przykleja się do lewej krawędzi) i DIV2 wyśrodkował się pod spodem, a nie na DIV1.

Answer 2

transform: translate(-50%, -50%);

To jest to czego szukasz.

Comments

1 linijka pomogła dzięki ci 

---

A jak to ma się w stosunku do skalowania, bo również skaluje się względem górnego lewego rogu

---

To po prostu przesuwa dany element o 50% jego szerokości w lewo oraz 50% jego wysokości w górę. Nie bardzo rozumiem o co ci chodzi :D

---

Ym, pomogło mi to w wysrodkowaniu tego diva, ale w CSS jak mu dodam hover i scalowanie to skaluje się od lewego rogu a nie od srodka

Answer 3

środkowanie