-1

HTML

<div id="centered">
//Some Content
</div>

CSS

#centered
{
margin-left:auto;
margin-right:auto;
}

The above code is horizontally aligning irrespective of the screen size. How to vertical align the same div in center?

Billy
  • 825
  • 6
  • 21
  • 36
  • look ath this one, http://stackoverflow.com/questions/18276572/how-to-center-a-div-tag-in-a-html-page-without-being-affected-by-zooming – Anoop Joshi P Nov 27 '13 at 06:11

3 Answers3

0

if you know the width and height of the div

then ( i have assumed it of 400 X 200), so just give negative to half values of these dimensions in margin property. you content will be centered

    #centered{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-100px;
    }

In case if your width and height are dynamic, then put this div in table so that you can vertically and horizontally align this to middle

Voonic
  • 4,667
  • 3
  • 27
  • 58
0

Try below css:

Demo

#centered
{
   position: absolute;
    height: auto;
    width: auto;    
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
Nikhil N
  • 4,507
  • 1
  • 35
  • 53
0

Try this code..

#centered
{
    margin-left:auto;
    margin-right:auto;
    display: table-cell; // here is the trick
    vertical-align:middle; // and this
    height:200px;
    border:1px solid blue;
}

http://jsfiddle.net/c5Y27/

zzlalani
  • 22,960
  • 16
  • 44
  • 73