-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
  • 1,196
  • 5
  • 17
  • 33
  • 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,419
  • 3
  • 26
  • 56
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%);
}
nik
  • 4,439
  • 1
  • 32
  • 50
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
  • 21,360
  • 16
  • 42
  • 72