Vertically Centering content in html [duplicate]

This question already has an answer here:

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?

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;
}

or you can also use this :

css :

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

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;
}

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.

You might also consider absolute centering:

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

来源：https://stackoverflow.com/questions/24245616/vertically-centering-content-in-html

标签