BHS DESIGN - Block Element Centering

Page Info

Page Title: Block Element Centering
Description: How to center an element both horizontally and vertically?
Author: Dumb Genius
Submission Date: 28-05-2005 19:22

Rating & Comments

View or add comments:

(0)
Average members rating:

You may have seen already a splash screen having an image centered on the screen both horizontally and vertically but you didn't know how? This can be very simply achieved by using CSS.

Here is the code you have to intergrate:

CSS

Code :
// hide source code
// hide line numbers



 1  #global {
 2       position:absolute;
 3       left: 50%; 
 4       top: 50%;
 5       width: 500px; 
 6       height: 200px;
 7       margin-top: -100px; /* half of the height */
 8       margin-left: -250px; /* half of the width */
 9       border: 1px solid #000000;
10       background: #CCCCCC; 
11

HTML

Code :
// hide source code
// hide line numbers



1  <div id="global"></div>

Notice that the margins have negative values and are half of the dimensions of the block element, in this special case the div using the id "global".

An example is given with the screenshot. Inside the div, you can insert anything you want including text, images, another block element, etc...

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.