How to center a div horizontally and vertically
The objective of this tutorial is to center a box horizontally and vertically, compared to the whole page.
Many webdesigners, or at least the most experienced in the construction of web pages, use a div called container that incorporates all content.
The "container" is needed to make a correct positioning of the table-less structure of the page. Può essere utile per definire una larghezza fissa o dinamica, per aggiungere uno sfondo, per definire un'altezza predefinita utilizzando le scrollbar , oppure per allineare il contenuto sul browser, orizzontalmente o verticalmente. It can be useful to define a fixed or dynamic width, to add a background, to define a default height using the scrollbar, or to align the content on the browser, horizontally or vertically.
We will consider the later case, alignment, both vertical and horizontal, trying to get as a result a site in the centre of the page.
CSS Code
body, html {
height: 100%;
margin: 0;
}
#container {
width: 350px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -175px;
}
HTML Code
<body> <div id="container"> --- here's the content of the whole page --- </div> </body>
Notes
Publication details
Category: CSS
Published by: loryzz on date: 06.03.2008 21:39:55
Last edit by: loryzz on date: 02.04.2008 16:54:26
Send to
Ratings
Leave a comment
All comments must be approved by site administrator.
Please write comments on topic. Spam will be never approved.
CSS: Linked articles
XHTML and CSS strike alternatives published by loryzz in CSS
Testo lampeggiante published by loryzz in CSS
Table style with css published by loryzz in CSS
Min-width property published by loryzz in CSS
Min-height property published by loryzz in CSS
Ritorna all'inizio
Based total comments
0 %
Comments percentage
0 %