Dynamically center div vertically and horizontally using jQuery
Question
I need to center vertically and horizontally a div called ".box" inside <body></body> . It contains a <h1> , and that's all. In the future, it may contents an <img> .
I tried a lot of tricks to do this, but unfortunately it doesn't work well...
So I found on this topic : Centering a div vertically & horizontally using jQuery a solution with jQuery. But it's not working perfectly, because the div stays on the left of the screen as you can see here : http://www.arcadmedia.com/
So I'm looking for a solution (in jQuery, or in CSS but nothing was working for me).
I think solutions like this one : http://jsfiddle.net/pqDQB/ are not the best, and jQ can do better.
I'm just using this code :
$(function() {
$('.box').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$('.box').outerWidth()/2,
'margin-top' : -$('.box').outerHeight()/2
});
});
I really don't know from where is this problem.
EDIT : The box has to fit its content dynamically!
7 answers
solution1
7 ACCPTED 2015-05-11 12:44:22
This will calculate dynamically the and position the .box at the center of the screen. You can also call this function on resize and rotate events.
$(updateBoxDimension);
$(window).on('resize', updateBoxDimension);
function updateBoxDimension() {
var $box = $('.box');
// To center the box
var boxLeft = ($(window).width()) / 2 - ($box.width() / 2),
boxTop = ($(window).height()) / 2 - ($box.height() / 2);
$box.css({
left: boxLeft,
top: boxTop
});
}
solution2
1 2015-05-11 12:43:04
You can do this in pure CSS like this:
http://jsfiddle.net/pqDQB/716/
HTML:
<div id="content">
Content goes here
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#content {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
vertical-align: middle;
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
If #content does not have fixed width/height, You use JavaScript to get those values and set proper margin-left and margin-top values in style attribute.
solution3
1 2015-05-11 13:02:25
As a variant you can add outer-div for your div and center your block with content inside it horizontally. And center outer block vertically using your JQuery.
So, your code in that case should be like this:
HTML:
<div class="box-outer">
<div class="box">
Lorem ipsum dolor sit amet.
</div>
</div>
CSS:
.box-outer {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
.box {
display: inline-block;
border: 2px solid #ccc;
margin: 0 auto;
}
JQuery:
$(function() {
var $box = $('.box-outer');
var boxHeight = $box.outerHeight( true );
$box.css({
'margin-top' : -1*( boxHeight/2 )
});
});
Also you can see the same code in fiddle: http://jsfiddle.net/shurshilin/0p01dqaL/
I hope it'll help you.
solution4
1 2015-05-12 07:26:20
Try this simply works in all browsers:
Center aligned #content{ width: 100px; height: 100px; background-color: red; position: absolute; margin:auto; top:0; left:0; right:0; bottom:0; }
solution5
0 2015-05-11 12:42:38
This post describe the best solution I found (CSS only). It explains how to center vertically, doing it horizontally is way easier.
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
solution6
0 2015-05-11 12:44:57
http://howtocenterincss.com/ I found this website really useful. It guides you to decide how to center in css.
solution7
0 2015-05-11 12:45:08
Put the css in a class and apply the class.
$('.box').add('my_class');
CSS
.my_class {
position : absolute,
left : '50%',
top : '50%',
}
And for other styles -
$('.box').css('margin-top' : -$('.box').outerHeight()/2):
$('.box').css('margin-left' : -$('.box').outerWidth()/2):
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.