Jak wyśrodkować w pionie pozycję: element względny

Question

Próbuję dzisiaj podstawowych CSS i natknąłem się na problem. Mam nadzieję, że ktoś mógłby mi w tym pomóc.

Jak wyrównać w pionie kontener macierzysty na płótno, które ma pozycję: względem niego? Kontener nadrzędny ma element potomny z pozycją: absolutną. Element potomny został umieszczony na środku pojemnika nadrzędnego.

Stworzyłem dla tego JSFiddle. http://jsfiddle.net/exmRf/

Pozdrawiam, Venna.

Answer 1

Jednym z rozwiązań jest owinąć .container z dwóch opakowań; podaj pierwszy: display: table; i oraz drugi display: table-cell; i vertical-align: middle;. Upewnij się także, że twoje body i html mają pełną wysokość.

Oto mała wersja demonstracyjna: little link.

Inną metodą jest zastosowanie top: 50%; do swoich .container i margin-top: -150px; (300px/2 = 150px). (Zauważ, że ta metoda wymaga znajomości dokładnej wysokości twojego kontenera, aby nie być dokładnie tym, czego potrzebujesz, ale równie dobrze może być!). Nieco działające demo tej ostatniej metody: another little link.

Mam nadzieję, że pomogło!

Answer 2

Demo

Daj swojej itemleft 50% i top 50% i margin-left połowie szerokości lub margin-top połowie górnej

obecnie wykorzystywana do tego css

.container{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    margin:auto; 
} 

.item{ 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    left:50%; 
    top:50%; 
    margin-left:-50px; 
    margin-top:-50px; 
} 

Demo

jeśli użyto nie ustawiaj niż stosowane do tej http://jsfiddle.net/exmRf/16/