Ekranin Ortasina Div Yerlestirmek

Bir Divi ekranin tam ortasina yerlestirmek hemen hemen hepimizin ihtiyaci olmustur. Tanimladiginiz bir divi CSS kullanarak çok basit bir sekilde ekranin ortasina yerlestirebiliriz.

Ilk olarak bir HTML sayfasi olusturun ve ekranin tam ortasinda gözükmesini istedigimiz divi asagidaki gibi tanimlayin.

<div id="container">
<p>Ekranin Ortasina Gelecek Olan Div</p>
</div>

. Div için sabit bir genislik ve yükseklik verelim.

#container {
  width: 100px;
  height: 100px;
  background-color: #567;
}

Ekran boyutlarindan bagimsiz olarak divi belirli bir yere yerlestirmek için divin top ve left pozisyonlarina %50 veriyoruz.

#container {
  width: 100px;
  height: 100px;
  background-color: #567;

  position:absolute;
  left: 50%;
  top: 50%;
}

Yukaridaki gibi birakirsak divin sol trafi ve en üst tarafi ekranin tam ortasinda olacaktir. Ama bizim istedigimiz ise dinin tam merkezinin ekranin ortasinda olmasi. Öyleyse soldan div genisliginin yarisi kadar sola, üstten divin yüksekliginin yarisi kadar yukari tasirsa istedigimizi elde etmis oluruz.

#container {
  width: 100px;
  height: 100px;
  background-color: #567;
   
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

HTML sayfamiz asagidaki gibi olacaktir.

 
<html>
<head>
<style>
    #container
    {
        width: 100px;
        height: 100px;
        background-color: #567;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>
</head>
<body style="background:#000">
    <div id="container">
    <p>Ekranin Ortasina Gelecek Olan Div</p>
    </div>
</body>
</html

One thought on “Ekranin Ortasina Div Yerlestirmek”

Bir cevap yazın Cevabı iptal et