Centering a div vertically using jquery

Question

I know a lot of techniques out there for centering a div vertically, but I made this according to my thinking. I believe the concept is correct, but I'm not getting 100% results.

Here is the javascript

jQuery(document).ready(function(){
  var l=jQuery('.div1').height();
  var level=l/2;
  var bt=jQuery('.div2').height()/2;
  var val=level-bt;
  jQuery('.div2').css("margin-top",val);
});

CSS

.div1
{
  height:50px;
  background-color: red;
  position:relative;    
}
.div2
{
    border: 1px solid;
    background-color: orchid;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding: 5px;
    position: absolute;
    right:5%;
    top:0%

}

HTML

<div class="div1"><div class="div2">vertical</div>

I calculated the outer div height and calculating the center by dividing it by 2.
Calculating the div center which should be centered, Here it is div2
Now I reduce the half of the div2 height with half of div1 height by the result, if I give that as a margin-top, I should be able to get it to center vertically. Am I right? if not could some one explain to me?

Check the fiddle

Why don't you want to use CSS? Stylistic questions should be achieved using CSS. — Aurelio De Rosa, Sep 10 '13 at 11:28
Absolutely not! For example... http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — Aurelio De Rosa, Sep 10 '13 at 11:31
You can only do it with css if you have a fixed height for the inner div. With jQuery you can get the height and apply it inline, so that the auto margin method will work. — Reinstate Monica Cellio, Sep 10 '13 at 11:33
@AurelioDeRosa Centering in the unknown is rather more complicated than it ought to be. JavaScript is an acceptable solution. — James Coyle, Sep 10 '13 at 11:35
@Archer - "You can only do it with css if you have a fixed height for the inner div.", that's not true, it can be done with CSS only and a variable height for the inner `div`, have a look: http://jsfiddle.net/DZxW2/3/. — Mathijs Flietstra, Sep 10 '13 at 11:47

score 1 · Answer 1 · answered Sep 10 '13 at 11:31

Try this, You are missing to subtract padding

jQuery(document).ready(function(){
    var l=jQuery('.div1').height();
    var level=l/2;
    var bt=jQuery('.div2').height()/2;

    var val=level-bt-parseInt(jQuery('.div2').css('padding-top'));
    jQuery('.div2').css("margin-top",val);
});

Demo

score 0 · Accepted Answer · answered Sep 10 '13 at 11:34

0

Use outerHeight to ignore the padding.

jQuery(document).ready(function () {
    var l = jQuery('.div1').outerHeight();
    var level = l / 2;
    var bt = jQuery('.div2').outerHeight() / 2;
    var val = level - bt;
    jQuery('.div2').css("margin-top", val);
});

http://jsfiddle.net/DZxW2/1/

answered Sep 10 '13 at 11:34

James Coyle

9,922
1
40
48

is outerHeight always a good practice even if we didn't have padding? – sun Sep 10 '13 at 11:46
@sun It depends on what the situation requires. `outerHeight()` gets the computed height of the element - height + padding + border - and can be given a parameter of true to also add the margin. `width()` will only get the width as defined by the CSS box model. – James Coyle Sep 10 '13 at 11:56

score 0 · Answer 3 · answered Sep 10 '13 at 11:38

You're not taking into account the padding on div2, if you get the outerHeight you should have more joy: http://jsfiddle.net/CPrtZ/1/

jQuery(document).ready(function(){
    var l=jQuery('.div1').height()/2;
    var bt=jQuery('.div2').outerHeight()/2;
    var val=l-bt;
    jQuery('.div2').css("margin-top",val);
});

Mathijs Flietstra · Answer 4 · 2013-09-10T12:11:41.693

I realise that this question is about how to do center a div vertically using jQuery, but it seems from the comments on this question that there is a mistaken belief that this cannot be done using only CSS. Here's a jsFiddle showing that it can be done. It works in all current browsers and IE8+.

HTML

<div class="div1">
    <div class="div2">vertically aligned while
        <br />height is not fixed but
        <br />based on content height</div>
</div>

CSS

body {
    display: table;
    width: 100%;
}
.div1 {
    height:200px;
    background-color: red;
    position:relative;
    display: table-cell;
    vertical-align: middle;
}
.div2 {
    border: 1px solid;
    background-color: orchid;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding: 5px;
}

Centering a div vertically using jquery

4 Answers4