How To Vertically Center A Web-page?
I am making a photography website, the size of page is about 960x780, and i want the page to remain in the center (vertically and horizontally) of the window, wether we zoom in or
Solution 1:
You need to use position: absolute;
to bring your page, better to describe it as a div/container in center horizontally/vertically...
Like This
.center {
width: 960px;
height: 780px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px; /* Half of the total width */margin-top: -390px; /* Half of the total height */
}
and if you want to center it just vertically you can do it like this :
HTML
<divclass="mainwrapper"><divclass="innerwrap"><divclass="content">
Your content
</div></div></div>
CSS
.mainwrapper {
display:table;
}
.innerwrap {
display:table-cell;
vertical-align:middle;
}
Post a Comment for "How To Vertically Center A Web-page?"