CODEWITHSUNDEEP
htmlcss
Alice
Alice

Reputation: 633

CSS layout to place a div on center of the screen

Again about css layout:

#container{
width:979px;
height:590px;
margin-left:auto; //works
margin-right:auto; //works
margin-top:auto; //doesn't work
margin-bottom:auto; //doesn't work
}

So, I want #container to place in the center of screen.
I also tried: margin:auto - without result.

Upvotes: 2

Views: 3338

Answers (8)

Aditi Nilangekar
Aditi Nilangekar

Reputation: 11

If u just want the container to place in the center of the screen. try this

CSS:

html, body { margin:0; padding:0; }

#container{
width:979px;
height:590px;
margin:0 auto;
}

HTML

<div id="container">
Data goes here
</div>

Hope this helps

Upvotes: 0

gabrielhilal
gabrielhilal

Reputation: 10769

What about something like:

#container{
width:979px;
height:590px;
position:absolute;
left:50%;
top:50%;
margin:-295px 0 0 -490px;
}

Upvotes: 2

Satya Teja
Satya Teja

Reputation: 616

You should set it manually by padding if you want to do it with css. or else if you want it to be dynamic you should write a javascript like following:-

var a = window.outerHeight;
var b = $('#id of div').height();
var c = (a-b)/2;
$('#id of div').css("margin-top",c);

Upvotes: 2

xiaowl
xiaowl

Reputation: 5217

I think you are looking for vertical centering, there is a blog about how to do that. Hope helpful.

Upvotes: 1

Hakadel
Hakadel

Reputation: 258

Or maybe you can use this solution :

<div class="container">
    <div class="block">
        <p>Hello world, i'm a vertical align div !</p>
    </div>    
</div>

div.bloc { 
    display:inline-block;
    vertical-align:middle;
}

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

If you know the height and width of #container you can do the following:

  1. Add a wrapper div around container and set it to position:relative
  2. Set #container to be position:absolute, top:50%, left:50%, margin-left:-XXXpx, margin-top:-XXXpx where the XXX values are half of the width and height of your #container.

Upvotes: 1

Calvein
Calvein

Reputation: 2121

The best method is to use display: table-cell and vertical-align: middle (which doesn't work on IE7-).

Because we don't have your HTML, the best I can do is link you this article which present you all the different method to achieve it.

Upvotes: 1

user818991
user818991

Reputation:

Have you tried margin-top:50%; you may have success with that.

Upvotes: 1

Related Questions