Bir projem de sayfa’ nın ortalanmasına ihtiyaç duydum. Bu konuda biraz araştırma yaptıktan sonra bir kaç kod buldum denemelerimi yaptım. Biraz da ekleme ve çıkarmalarla sonun da kodu aşağıdaki hale getirdim ve tatamm karşınızda;
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Yatay ve Dikey Ortalama</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.govde{ position: absolute; width: 100%; height: 50%; left:50%; top: 50%; background-color: red; overflow: hidden;}
</style>
<script type="text/javascript">
$(function(){
responsive(".govde"); // Sayfa yüklendiğinde fonksiyonu çalıştırıyoruz
$(window).resize(function() {
responsive(".govde"); // Pencere büyütülüp küçültüldüğünde yeniden çalıştırıp yeni değerlere göre Divi konumlandırmış oluyoruz.
});
});
function responsive(nesne){
var gen=$(nesne).outerWidth(); // Divin dış genişliğini alıyoruz
var yuk=$(nesne).outerHeight(); // Divin dış yüksekliğini alıyoruz
var l = Math.round(gen/2); // Genişliğin yerısını alıp tamsayıya yuvarlıyoruz
var t = Math.round(yuk/2); // Yüksekliğin yarısını alıp tamsayıya yuvarlıyoruz
// Css e eklemeler yapıyoruz
$(nesne).css({
'margin-left':'-'+l+'px',
'margin-top':'-'+t+'px'
});
}
</script>
</head>
<body>
<div id="govde" class="govde">
Bu Divi Tarayıcı Sorunu Olmadan Ortalıyoruz...
</div>
</body>
</html>