Aligning block of code to the center of a given area

Question

This is my code: http://jsfiddle.net/spadez/QJDjh/2/

HTML

<div id="header" class="fullheight center">
    <div id="nav">
        <ul>
            <li>Home</li>
            <li>Price</li>
        </ul>
    </div> <span>Big message</span>
 <span>Smaller message</span>
 <a href="#" id="sign_up">Sign up free</a>
 <span>Sub notes</span>
down arrow</div>
<div id="content">Hello</div>

CSS

* {
    padding: 0px;
    margin: 0px;
}
html, body {
    height:100%;
}
#header {
    background-color: #3B2F63;
    background-image: -webkit-radial-gradient(50% top, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%), -webkit-radial-gradient(right top, #794aa2 0%, rgba(121, 74, 162, 0) 57%);
    background-repeat: no-repeat;
    background-size: 100% 1000px;
    color: #c7c0de;
    margin: 0;
    padding: 0;
}
#header {
}
#content {
    background-color: white;
}
.fullheight {
    height: 100%;
}
.center {
    text-algin: center;
}
span {
    display: block;
}
#sign_up {
    padding: 10px;
    background: white;
    border-radius: 3px;
}

I'm trying to put the following block right in the vertically and horizontally centered in the area which is coloured in purple:

<span>Big message</span>
<span>Smaller message</span>
<a href="#" id="sign_up">Sign up free</a>
<span>Sub notes</span>

I want to do this without breaking the layout. Do I have to put this block in a new div, and set equal margins?

It would help if you spelt `text-align` properly: http://jsfiddle.net/peteng/QJDjh/3/ — Pete, Apr 23 '14 at 13:01
Thank you, but it was more the vertical height I am struggling with — Jimmy, Apr 23 '14 at 13:06
ah ok, you need to use `display:table` then http://jsfiddle.net/peteng/QJDjh/5/ — Pete, Apr 23 '14 at 13:11
That looks good, thank you, can you set it as an answer please? Also I ideally don't want the home price or down arrow bit in the middle as it is on your example, but otherwise it's perfect — Jimmy, Apr 23 '14 at 13:15

score 1 · Accepted Answer · answered Apr 23 '14 at 13:26

You can use the display:table properties to achieve what you are after:

HTML

<div id="header" class="table">
    <div class="row top">
        <div class="cell">
            <ul>
                <li>Home</li>
                <li>Price</li>
            </ul>
        </div>
    </div>
    <div class="row middle">
        <div class="cell">
            <span>Big message</span>
            <span>Smaller message</span>
            <a href="#" id="sign_up">Sign up free</a>
            <span>Sub notes</span>
        </div>
    </div>
    <div class="row bottom">
        <div class="cell">
            down arrow
        </div>
    </div>
</div>

<div id="content">
    Hello           
</div>

CSS

.table { height: 100%; display:table; width:100%; }
.row { display:table-row; }
.cell { display:table-cell; text-align:center; vertical-align:top; }
.middle .cell { vertical-align:middle; height:100%;}

Example

score 0 · Answer 2 · answered Apr 23 '14 at 13:06

You'll need jquery help to do it: Wrap it in a div like this:

<div class="className">
<span>Big message</span>
<span>Smaller message</span>
<a href="#" id="sign_up">Sign up free</a>
<span>Sub notes</span>
down arrow
</div>

And then use such script:

$(document).ready(function(){

 $(window).resize(function(){

  $('.className').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.className').outerWidth())/2,
   top: ($(window).height() 
     - $('.className').outerHeight())/2
  });

 });

 // To initially run the function:
 $(window).resize();

});

Source. And output: http://jsfiddle.net/maysamsh/QJDjh/4/

I thought this could be achieved without JS though, http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — Jimmy, Apr 23 '14 at 13:07

Aligning block of code to the center of a given area

2 Answers2