1

I am trying to vertically center a <div> within a <body>

The reason I'm trying to do this is because I'm trying to design a website that is in the style of the Windows 8 Metro start screen

Does anyone know how this can be done?

j08691
  • 204,283
  • 31
  • 260
  • 272
SomeoneSpecial99
  • 11
  • 4

2 Answers2

1

If you want center block verticaly you can use this trick's

margin is a half of your size bloc.

If you use this you need size on your bloc.

html :

<div id="center"></div>

css :

#center{
    position:absolute;
    left:50%;
    top:50%;
    height:400px;
    width:600px;
    margin-left:-300px;
    margin-top:-200px;
}

DEMO : http://jsfiddle.net/ucbRs/

or you can also use this :

css :

#center{
    position:absolute;
    left:100px;
    top:100px;
    bottom:100px;
    right:100px;
}

DEMO : http://jsfiddle.net/ucbRs/1/

or you can also use a CSS3 property align-content like this :

body{
    display:flex;
    flex-flow: row wrap;
    align-content:center;
}
#center{
    margin:0 auto;
}

DEMO : http://jsfiddle.net/ucbRs/3/

Joffrey Maheo
  • 2,919
  • 2
  • 20
  • 23
0

Welcome to SO!

Vertically centering a div is actually very simple.

div{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

There you have it.

Demo

You might also consider absolute centering:

div{
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Demo

AstroCB
  • 12,337
  • 20
  • 57
  • 73