centering 'div's: html, css

Centering, horizontal

CSS

 

{ margin-left: auto; margin-right: auto; }

This method works and seems to be compatible with all major browsers, including IE.

1. The div's width must be defined (px, em, %)
2. a !DOCTYPE must be declared to work in IE

references: www.thesitewizard.com: center-div-block www.fbdemo.com, name

mmryan example 1

mmryan example 1

{ margin: 0 auto; }

This method does not work in IE , but seems to be compatible with all other major browsers.

HTML

 

<div align="center">

This method is deprecated but still works since it's still compatible with all major browsers. The W3 suggestion id to use the CSS 'text-align' property, but this method only aligns text within the <div> and not the child <div> itself.

other references: theodorakis.net/tablecentertest

Centering, vertical

CSS

{ position:relative; display:table-cell; vertical-align:middle; }

HTML

in brief: the same method, using an overall table-cell and 'align-middle' for the entire page.

Fill-screen, vertical

CSS

html, body {height:100%;} /*now part of 'groupwide' */

www.communitymx.com/content/article

A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy. In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent.
Please note, however, that this is not a tutorial about making a footer stick to the bottom of the browser viewport or about emulating frames. These are more complicated layout requirements that may be covered in further tutorials, building on the 100 percent height technique introduced here.