Jak wyśrodkować div w pionie dla wszystkich przeglądarek?
Chcę wyśrodkować div w pionie za pomocą CSS. Nie chcę tabel ani JavaScript, ale tylko czysty CSS. Znalazłem kilka rozwiązań, ale wszystkie z nich nie obsługują Internet Explorera 6.
<body>
<div>Div to be aligned vertically</div>
</body>Jak mogę wyśrodkować div w pionie we wszystkich głównych przeglądarkach, włączając Internet Explorer 6?
Poniżej znajduje się najlepsze rozwiązanie, jakie udało mi się zbudować do pionowego i poziomego wyśrodkowania pudełka z treścią o stałej szerokości i elastycznej wysokości. Zostało ono przetestowane i działa dla ostatnich wersji Firefoxa, Opery, Chrome i Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>Zobacz działający przykład z dynamiczną zawartością
Wbudowałem trochę dynamicznej zawartości, aby przetestować elastyczność i chciałbym wiedzieć, czy ktoś widzi jakieś problemy z tym. Powinno to działać dobrze również dla wyśrodkowanych nakładek -- lightbox, pop-up, itp.
Właściwie potrzebujesz dwóch div'ów do pionowego wyśrodkowania. Div zawierający treść musi mieć szerokość i wysokość.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>Oto wynik
Niestety - ale nie jest to zaskakujące - rozwiązanie jest bardziej skomplikowane niż można by sobie tego życzyć. Również niestety, będziesz musiał użyć dodatkowych divów wokół diva, który chcesz mieć wyśrodkowany w pionie.
W przypadku przeglądarek zgodnych ze standardami, takich jak Mozilla, Opera, Safari itp. należy ustawić zewnętrzny div jako table, a wewnętrzny div jako table-cell - które mogą być następnie wyśrodkowane w pionie. W przypadku Internet Explorera, należy pozycjonować wewnętrzny div absolutnie wewnątrz zewnętrznego div, a następnie określić top jako 50%. Poniższe strony dobrze objaśniają tę technikę, a także zawierają próbki kodu:
- Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)(już nieaktualne)- Centrowanie w pionie w CSS z nieznaną wysokością (Internet Explorer 7 compatible)]4 (artykuł zarchiwizowany dzięki Wayback Machine)
Istnieje również technika wykonywania pionowego centrowania za pomocą JavaScript. Demonstruje ją Vertical alignment of content with JavaScript & CSS.
