Search code examples
htmlcenter

How to center my div

I've googled this many times, and I cant understand why my div wont center.

HTML:

<body><div id="mydiv"></div></body>

css

*{
    margin:0; 
    padding:0; 
}           
html,body{height:100%; width:100%;}

#mydiv{ 
            height:50%;
            width:50%;
            background:grey;
            margin:auto;

}

It only centers horizontally and wont center vertically, whats the problem because im not seeing it.

Solution

  • Try something like:

    #mydiv { 
    height:50%;
    width:50%;
    background:grey;
    position:absolute;
    top:25%;
    left:25%;
}