2

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!

Maxime Lafarie
  • 2,172
  • 1
  • 22
  • 41
  • does your div have a fixed height and width? – Pratik May 11 '15 at 12:41
  • the problem is with your conatiner (body), add a rule html, body { width:100%; height:100%; position:relative; } – VVV May 11 '15 at 12:43
  • If your div does not have a fixed width/height, you could get the screen width, subtract the width of the div and set the left/right position to half of that value. Same goes for the height. You can also use CSS calc() – swiss_blade May 11 '15 at 12:44
  • Ok I 'll try it! No, my div has no fixed width and height, because I want that the box is flexible with its content. – Maxime Lafarie May 11 '15 at 12:48

7 Answers7

7

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
    });
}

Demo: https://jsfiddle.net/tusharj/a5Lpeoux/1/

Tushar
  • 85,780
  • 21
  • 159
  • 179
  • are you sure this will pull the div at center...I dont think so.. whrere as it will start the div from center position and result will be something diff – Nilesh Mahajan May 11 '15 at 12:49
  • @NileshMahajan That's why subtracted the `boxWidth` from `windowWidth` and then divided by 2 – Tushar May 11 '15 at 12:52
  • This solution is interesting, but I want the div fit the content inside it. Like a display table for example. If I remove width and height in css, I takes all the screen width. Moreover, if I resize the window, the div doesn't change. – Maxime Lafarie May 11 '15 at 14:39
  • @RoyLaPoutre For `resize` you have to add event on the window and call the same function – Tushar May 11 '15 at 14:44
  • @RoyLaPoutre `display: table` works on your site, you just have to remove the `margin-left` and `margin-top` of the `.box` element. That is causing the box to go in corners – Tushar May 11 '15 at 14:52
  • if in right to left mode rtl mode should be change to right:boxright instead of left: boxLeft – saber tabatabaee yazdi Sep 16 '16 at 14:25
1

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.

Jazi
  • 6,569
  • 13
  • 60
  • 92
1

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.

Dmitry Shurshilin
  • 756
  • 5
  • 13
1

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;
}
Rajendrakumar Vankadari
  • 21
  • 2
0

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/

Ruff9
  • 1,163
  • 15
  • 34
0

http://howtocenterincss.com/ I found this website really useful. It guides you to decide how to center in css.

sdn342323
  • 399
  • 3
  • 5
0

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):
Sougata Bose
  • 31,517
  • 8
  • 49
  • 87