There are very few references for using CSS to center elements, so I hope this helps. You can use the 'align' attribute on some HTML elements or revert to the <center> tag, but these are depreciated website design techniques that have limitations that you may want to avoid.
But that still leaves the question of centering elements with CSS. The best
approach is to use set the appropriate margin setting to "auto" on any block-level element to be
centered, and using "text-align:center" to center inline elements within a block-level element.
Use the "View Source" command in your browser to examine the HTML for this
page. Be sure to check out the CSS style commands in the <head> section, and then
look for the <div> tag in the code with the class attribute of "cellContainer".
This text is contained in a pair of nested <div>s: an inner <div> (class 'cellBody' in this document) and an outer container <div> (class 'cellContainer'). The outer <div> is set to a width of 100% which it inherits from the parent containing element. The parent in this case is the whole document - specifically, the <body> tag, but it could be another <div> or a <td> within a <table>. The inner <div> that encloses the content to be centered has its width set to 75% of the width of its parent block-level element. The concept of the containing element is one you need to absorb when dealing with CSS because, after all, it's the "cascading" capabilities of CSS that are so fundamental.
To center the image within the already-centered <div> that holds this text block, I enclosed the <img> inline element with a <p>aragraph tag, and used "text-align:center" on the <p> tag.
But the key is that the margin of the inner <div> has its left and right settings set to "auto" which automatically adjusts to the size of the viewport as the window is resized, keeping the element(s) contained in the inner <div> perfectly centered. You can use this technique anywhere on your page, since it does not rely on absolute positioning or nested <table> tags that can get difficult to maintain and edit as your webpage design changes.
Vertical centering is a very different matter because you cannot rely on a CSS setting of "auto" for it. You must give CSS some fixed settings for things to fall into place, and there's a bit of a trick involved that I learned thanks to the Dead Centre page by Web Page Design for Designers, which is a great site for polishing up your web design skills. The "trick" is to create a container that is set to position:absolute and top:50%, with a height of 0 and overflow:visible. This gives us a vertically-centered baseline from which we can create an inside container that will hold the actual content. The second half of the trick is to set the inside containing element that holds the real content to position:absolute with a specified height setting (not a percentage!) and the top to exactly half of the specified height. The red "line" is actually a <div> which is used to hold the content we want to display and to give it a vertical baseline. In actual use, this containing element would not have the red border and its height is set to 0, to make it invisible to the user. You can see proof that the purple box is vertically centered by clicking this link, which calls a JavaScript function that increases the height of the outer <div> with the blue border. If you click the link a second time, the <div" will return to its original height again.
This is the outer containing <div>. It needs to have it's position set to either relative or absolute in order to give the content to be centered vertically a reference point because it relies on absolute positioning.
Content to be centered vertically with CSS
CSS Tutorial Main Page •
Scripts and Tutorials Menu
Copyright © 2005-2011 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission.
