01. Horizontal Centering

To horizontally center block level elements in CSS you need three things. You need to explicitly set a width on the element, set the left and right margins to auto, and include a proper doctype to keep older versions of IE from going into quirks mode.

  1. div#page {width: 960px; margin: 0 auto

The above will center the div with an id of page inside it’s parent container.


02. Vertical Centering Text with Line-Height

If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the height of the containing block

The HTML:  <divid="container">some text here</div>

The CSS:  div#container {height35pxline-height35px


03. Vertical Centering Block Level Elements

Positioning can be used to vertically center block level elements.

HTML: <div id="content">your content here</div>

CSS: div#content {positionabsolutetop: 50%; height500pxmargin-top: -250px

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

div#content {positionabsolutetop: 50%; left:50%; width:800pxheight500pxmargin-left: -400px;  margin-top: -250px

The above CSS will center the element both vertically and horizontally.


04. Fluid Images

To create fluid images set a max-width on the images to be 100%

img {max-width: 100%}  

Unfortunately IE doesn’t do max-width. However IE treats the width property as though it was max-width. For IE use a conditional comment and set

img {width: 100%}  

For a more details about creating fluid images in older versions of IE click the link above.


05. 3D Buttons with CSS Only

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn’t.

div#button {background#888border1px solidborder-color#999 #777 #777 #999 }  

The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.

The CSS:
About Author
Riaz Uddin Masum
Web Master
Hi, I am Riaz Uddin Masum, This is my play ground for web and IT. I like to read and write about any IT related Topic. I love to Design and Develop web site. it is my job too. My objective is to establish my career in web.
Other articles

DMC Firewall is developed by Dean Marshall Consultancy Ltd