Vertically center a Div inside a Div

Question

I wrote the below program to get notifications from the database and display it. The situation was to display the div inside div.note vertically centered.

I tried vertical-align: middle and vertical-align: center and both failed. I found that they are for table cell. So I opted this.

<?php
include("../common/config.php");
$query = "SELECT content FROM st_notifications";
$result = mysqli_query($dbc, $query) or die(mysqli_error($dbc));
while($row = mysqli_fetch_row($result))
{
    echo "<div class='note'><div style='word-wrap: break-word;'>".$row[0]."</div></div>";
}
?>
<script>
    $(function () {
        $(".note").each(function () {
            var note = $(this);
            var diff = 100 - ($("div", note).outerHeight() / 2);
            $("div", note).css({ 'margin-top': diff >= 0 ? diff : 0 });
        });
    });
</script>

the output was something like this.

enter image description here

The css of .note is:

.note {
    height: 200px;
    width: 500px;
    margin: 25px auto 0px auto;
    background-color: #fff;
    padding: 10px;
    vertical-align: baseline;
    background-image: url(../images/notebg.png);
    background-size: 100% 100%;
}

The output on Chrome debugger was:

enter image description here

You can see that both the margins are 100px instead of being assigned relatively.

I read this. But don't know how to relate it to my problem

And the solution here seems to be incredibly long.

Can somebody tell where I am wrong? Thanks in advance.

PS: I tried jQuery by directly calling the element and using each() function both give the same. And there is no debugging error in Chrome regarding JavaScripts or PHP.

[Chapter 9 - Positioning: Advanced - Pro CSS and HTML Design Patterns - Written by Michael Bowers. Published by apress® on April 23, 2007.](http://cssdesignpatterns.com/Chapter%2009%20-%20POSITIONING3/index.html) - just pick what you need — hakre, Dec 24 '12 at 14:03

Mr. Alien · Accepted Answer · 2012-12-24T14:31:39.997

Use display: table-cell; to align the nested div vertically centered

Demo

HTML

<div class="wrapper"><div class="inner">This is vertically centered</div></div>

CSS

div.wrapper {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    width: 300px;
    background-color: #ff0000;
    text-align: center;
}

div.inner {
    display: inline-block; /* This is optional */
}

If the div is fixed

Way 2 Demo

HTML

<div class="container"><div class="float">This will work with fixed dimensions</div></div>

CSS

.container {
    width: 500px;
    height: 300px;
    background: #eee;
    position: relative;
}

.float {
    position: absolute;
    height: 50px;
    width: 150px;
    left: 50%;
    top: 50%;
    margin-left: -75px; /* Half Of Width */
    margin-top: -25px; /* Half Of Height */
    border: 1px solid #aaa;
}

I agree with @AtifMohammedAmeenuddin. I am designing a web page for my college and I dont want any different views, please. I also mentioned I have already tried those methods. — Gopikrishna S, Dec 24 '12 at 14:06
@GopikrishnaS I can give you another solution if the width is fixed — Mr. Alien, Dec 24 '12 at 14:08

score 2 · Answer 2 · answered Dec 24 '12 at 14:08

2

Set the inner div's position to absolute and top as 50%. Play with the position and top,left attributes to get your positioning correct. Try having your parent div's position as relative if that helps.

answered Dec 24 '12 at 14:08

GautamJeyaraman

545
2
11

Sorry, no success in setting the position to absolute. – Gopikrishna S Dec 24 '12 at 14:09

sdespont · Answer 3 · 2012-12-24T14:06:33.060

0

JQUERY Solution

I am using this function I created some day:

/**
 * Permits to center an element vertically in its parent
 * The div to center must exist before calling this function
 * @param : element => div to center
 * @param : offset => offset to apply
 * @param : parent => center into a parent, by default, window size is used
 */
function centerDivVertically(element,offset,parent)
{
    parent = parent || null;

    var myOffset = (offset != null) ? offset : 0;
    var height = window.innerHeight ? window.innerHeight : $(window).height();

    //Align to the parent
    if(parent != null)
        height = $(parent).height();

    var elementHeight = height - $(element).height();
    $(element).css('top',(elementHeight/2)+myOffset + 'px');    
}

//Usage
centerDivVertically('#myDiv',0,null);

edited Dec 24 '12 at 14:06

answered Dec 24 '12 at 14:01

sdespont

13,915
9
56
97

Thank you friend, but why you need to calculate the `window.height`? – Gopikrishna S Dec 24 '12 at 14:03
The window height calculation is done using different methods depending on the browser : ´var height = window.innerHeight ? window.innerHeight : $(window).height();´ – sdespont Dec 24 '12 at 14:05
this gives the same result `top: 100px` like mine where it gives `margin-top: 100px` @sdespont – Gopikrishna S Dec 24 '12 at 14:27

score 0 · Answer 4 · answered Dec 24 '12 at 14:03

0

.outer {
    width: Xpx;
    height: Ypx;
    border: 1px solid red;
}
.inner {
    width: 50%;
    height: 50%;
    background: blue;
    margin: 0 auto;
    margin-top: 25%;
}

Demo: http://jsfiddle.net/maniator/tUX5Z/

answered Dec 24 '12 at 14:03

Naftali

144,921
39
244
303

Vertically center a Div inside a Div

4 Answers4