Wyśrodkowanie div’a w poziomie i pionie

Częstym problemem, z jakim może się spotkać początkujący webmaster, jest wyśrodkowanie konkretnego elementu strony, najczęściej jest to DIV. W tym wpisie pokażę kilka sposobów na centrowanie – zarówno w poziomie jak i w pionie.

Centrowanie w poziomie

Sposób #1

#center {
   width: 200px;
   margin: 0 auto;
}
<div id="center">
   Wyśrodkowana zawartość.
</div>

Sposób #2

#center {
   width: 200px;
   margin-left: -100px; /* połowa szerokości */
   position: absolute;
   left: 50%;
}
<div id="center">
   Wyśrodkowana zawartość.
</div>

Centrowanie w poziomie oraz pionie

Sposób #1

#center {
   width: 200px;
   height: 200px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -100px; /* połowa szerokości */
   margin-top: -100px;  /* połowa wysokości */
}
<div id="center">
   Wyśrodkowana zawartość.
</div>

Sposób #2

#center {
   width: 200px;
   height: 200px;
   margin: auto;
   position: absolute;
   top:0; bottom:0; /* wyrównanie w pionie */
   left:0; right:0; /* wyrównanie w poziomie */
   max-width: 100%;
   max-height: 100%;
   overflow: auto;
}
<div id="center">
   Wyśrodkowana zawartość.
</div>

Sposób #3

#wrapper {
   position: absolute;
   top: 50%;
   left: 0px;
   width: 100%;
}
#center {
   width: 200px;
   height: 200px;
   margin-left: -100px;  /* połowa szerokości */
   top: -100px;          /* połowa wysokości */
   position: absolute;
   left: 50%;
}
<div id="wrapper">
   <div id="center">
      Wyśrodkowana zawartość.
   </div>
</div>

Sposób #4

// Skrypt korzysta z biblioteki jQuery
$(document).ready(function(){
   $('#center').css({
	position:'absolute',
	left: ($(window).width() - $('#center').outerWidth())/2,
	top: ($(window).height() - $('#center').outerHeight())/2
   }); 
});
<div id="center">
   Wyśrodkowana zawartość.
</div>

Powiązane Wpisy

Prosta Captcha

Prosty kod bezpieczeństw...

Blokowanie adresu IP...

Button Maker

Button Maker...

Komentarze

  1. code dnia 29 stycznia 2013 o 18:54 napisał(a):

    Lepiej użyć margin: 0 auto;

  2. Dzięki pomogło

  3. xaxaxa dnia 28 lutego 2013 o 17:32 napisał(a):

    @Code dzięki :>

  4. gurak dnia 18 kwietnia 2013 o 10:50 napisał(a):

    W jaki sposób wycentrować img (o nie znanych/różnych rozmiarach) w które ma display: block; i znane stałe rozmiary?

  5. Js dnia 31 marca 2016 o 20:30 napisał(a):

    A czy moglibyście mi pomóc w pewnej kwestii? Mam na stronie typu one page plynne przewijanie po kliknieciu odnosnika. Jednak przewiniecie do okreslonej kotwicy powoduje ze znajduje sie ona na samej gorze strony. Ja natomiast chcialbym zeby zatrzymywala sie na srodku. Bardzo Was proszę o pomoc

  6. Seba69PL dnia 24 października 2016 o 11:26 napisał(a):

    Dzięki, działa.

  7. Seba69PL dnia 24 października 2016 o 11:31 napisał(a):

    Jednak nie działa,
    nie dzięki.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *