I am using this script to center my div horizontally and vertically.
When the page loads the div gets centered vertically, not horizontally until I resize the brows
You can use that plugin it is very simple to use https://github.com/tenbullstech/jquery-make-me-center
$("div.box").makemecenter();
my div with class center has to be centered horizontally in the middle and it's position is fixed. I use this small code to make it happen:
$(window).on('resize load', function () {
$('.center').each(function () {
$(this).css({
'margin-left': ($('body').width() - $(this).width()) / 2
});
});
});
you can use same tactics for horizontal alignment too. Take a look that it handles at once on load and on resize events, so this div is always in the middle.
I have recently been trying to place a box in the middle of a browser window. I created the code below. The jQuery script is quite long because I took into account all paddings and margins of html and body tags, if someone have set them. If one does not care about the backgrounds, then only winwidth, winheight, toppx, leftpx, and "#container" have to be set. The rest may be deleted.
<!DOCTYPE html>
<html>
<head>
<title>Test of centre of container</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
html {
background-color: #444;
margin: 30px;
}
#wrapper {
background-color: #777;
width: 75%;
margin: 0 auto;
padding: 0;
}
#container {
background-color: #ffffd;
border-radius: 10px;
box-shadow: 0 0 2px #222;
width: 200px;
height: 100px;
position: absolute;
vertical-align: middle;
}
#extext {
text-align: center;
padding: 0;
}
</style>
</head>
<body>
<script>
function setDimensions() {
var winwidth = $(window).width();
var winheight = $(window).height();
var htmlmv = parseInt($("html").css("margin-top")) + parseInt($("html").css("margin-bottom"));
var htmlpv = parseInt($("html").css("padding-top")) + parseInt($("html").css("padding-bottom"));
var htmlmh = parseInt($("html").css("margin-left")) + parseInt($("html").css("margin-right"));
var htmlph = parseInt($("html").css("padding-left")) + parseInt($("html").css("padding-right"));
var bodymv = parseInt($("body").css("margin-top")) + parseInt($("body").css("margin-bottom"));
var bodypv = parseInt($("body").css("padding-top")) + parseInt($("body").css("padding-bottom"));
var bodymh = parseInt($("body").css("margin-left")) + parseInt($("body").css("margin-right"));
var bodyph = parseInt($("body").css("padding-left")) + parseInt($("body").css("padding-right"));
var vspace = htmlmv + htmlpv + bodymv + bodypv;
var hspace = htmlmh + htmlph + bodymh + bodyph;
var wrapheight = winheight - vspace;
var wrapwidth = winwidth - hspace;
$("#wrapper").height(wrapheight);
// $("#wrapper").width(wrapwidth);
var toppx = (winheight - parseInt($("#container").css("height"))) / 2;
var leftpx = (winwidth - parseInt($("#container").css("width"))) / 2;
$("#container").css("top", toppx.toString() + "px");
$("#container").css("left", leftpx.toString() + "px");
}
$(document).ready(function () {
setDimensions();
});
$(window).resize(function () {
setDimensions();
});
</script>
<div id="wrapper">
<div id="container">
<p id="extext">Example text</p>
</div>
</div>
</body>
</html>
EDIT: I found much better solution for this on CSS Tricks website and it uses only CSS :). The code's below:
<!DOCTYPE html>
<html>
<head>
<title>
Test centring!
</title>
<style>
body div {
background-color: red;
box-shadow: 0 0 15px #222;
border-radius: 10px;
padding: 10px;
margin: -150px auto auto -200px;
width: 380px;
height: 280px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
line-height: 140px;
}
body div h2 {
color: yellow;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<h2>
Example text<br />
Example Text
</h2>
</div>
</body>
</html>