Wyrównanie pionowe i poziome (środkowe i środkowe) z css

Question

Ćwiczę CSS i jestem tak zdezorientowany, jak mogę zmusić mój element div do wyśrodkowania (w pionie i poziomie) na mojej stronie (czyli w jaki sposób lub w jaki sposób dla przeglądarki krzyżowej zgodność)?

Pozdrawiam!

Answer 1

Istnieje wiele metod:

1. Centrum align poziomego i pionowego elementu ze stałym środkiem

CSS

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%; 
margin-left:-100px;margin-top:-50px;"> 
<!–content–> 
</div> 

---

2. Centrum poziomo i pionowo w jednej linii tekstu

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;"> 
<!–content–> 
</div> 

---

3. Wyrównaj poziomego i pionowego elementu bez szczególnego środka

CSS

<div style="display:table;height:300px;text-align:center;"> 
<div style="display:table-cell;vertical-align:middle;"> 
<!–content–> 
</div> 
</div> 

---

Więcej tutaj:Horizontal and Vertical Alignment in CSS

Answer 2

This blog post opisuje dwie metody centrowania div zarówno poziomo jak i pionowo. Jeden używa tylko CSS i będzie działał z elementami div o stałym rozmiarze; drugi używa jQuery i będzie działał div, dla którego nie znasz rozmiaru z góry.

Mam powielane CSS i jQuery z przykładów demo poście na blogu tutaj:

CSS

Zakładając, że masz div z klasą .nazwaklasy, poniżej css powinno działać.

Ustawienie left:50%; top:50%; ustawia lewy górny róg elementu div na środek ekranu; margin:-75px 0 0 -135px; przesuwa go w lewo i do góry o połowę szerokości i wysokości odpowiednio o ustalonym rozmiarze div.

.className{ 
    width:270px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -135px; 
} 

jQuery

$(document).ready(function(){ 
    $(window).resize(function(){ 
     $('.className').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.className').outerWidth())/2, 
      top: ($(window).height() - $('.className').outerHeight())/2 
     }); 
    }); 
    // To initially run the function: 
    $(window).resize(); 
}); 

Oto demo of the techniques in practice.

Answer 3

To nie jest takie proste, jak można by się spodziewać - w rzeczywistości można wykonać tylko pionowe ustawienie, jeśli znasz wysokość swojego pojemnika. W takim przypadku możesz to zrobić z absolutnym pozycjonowaniem.

Założeniem jest ustawienie górnego/lewego położenia na 50%, a następnie użycie ujemnych marginesów (ustawionych na połowę wysokości/szerokości), aby odciągnąć pojemnik do środka.

Przykład: http://jsbin.com/ipawe/edit

Podstawowe CSS:

#mydiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 400px; 
    width: 700px; 
    margin-top: -200px; /* -(1/2 height) */ 
    margin-left: -350px; /* -(1/2 width) */ 
    } 

Answer 4

Ta strona daje kilka opcji na pionowo centrowania swoją Gr: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 5

istnieje lepsze rozwiązanie teraz: Vertical align anything with just 3 lines of CSS