In General

Table can center Hor and Vertical, on the fly for any height and width
A Div with a fixed width can Center Hor but not vertically
A Div with a fixed width, as a Table Cell, can Center Vertically but not Horizontally

Table

Standard table with style="margin:auto;width:300px;height:300px".
Table elements are placed as block elements so the "margin:auto" will center the table.
With the Table set to "border-collapse:collapse" you will not see the table outer border of red
Table Horizontal Center: style="margin:auto
Cell Horizontal Center: td style"text-align:center"
Cell Vertical Center: this is Automatic in a Table
The text-align property specifies the horizontal alignment of text in an element.
Just a word And the moon ran away with the fork and the spoon over hill and dale under blue skies

Div's withOUT fixed width

Div's with OUT fixed widht will take up the entire screen, or you can use 50%
These use Margin:auto and width 50%

Lots of Text. Once upon a time in a land far far away there lived a little dog with a big tail and lost of fur

Small Text

with "text-align:center"
Small Text
with img

Div's as table-cell

Block elements can have dimensions applied but inline elements can't. In this case the div is placed as a "display: table-cell". The element by default is placed inline and not block so it ignores "margin:auto" for centering left and right. Since it is placed as a "display:table-cell" items inside will be centered vertically. Without a hard "br" they would be placed side by side because of the in-line.
Lots of Text. Once upon a time in a land far far away there lived a little dog with a big tail and lost of fur

Small Text

with "text-align:center"
Small Text
with img

Div with fixed width

Center a Div horizontally with fixed width and "margin:0 auto". You must have a fixed width. This will not help with vertical centering. Shorthand (magin: all)(margin:top/bottom, Left/right)(margin Top, Right, Bottom, Left)
Jack sprat could eat no fat his wife could eat no lean so it was a very unhappy time for all.

small text

with text-align:center
small text



Div table-cell wrapped in a fixed with div
Wrap a (div class="TableCell") in standard fixed with div. In this example the container div (red) is 400 wide and the content div (green) is only 300 wide. You could get this to center by making both equal.
Once upon a time in a land far far away there lived a little dog with a big tail and lost of fur

Small Text

with text-align:center
Small Text



Side by Side: Div table-cell's wrapped in a fixed with div's

Place 2 of these side by side
Put 2 divs in a container div.
Each 300px box has a 1px border so the container must be 1+300+1+1+300+1px = 604px width
In this example the width was incorrect set for 700px for visibliy only
"overflow:auto" was turned on for the outer container to it would wrap all sub elements for visibily only.
to make this look nice you would also have to add padding and margins to all elmenets.
Once upon a time in a land far far away there lived a little dog with a big tail and lost of fur
Once upon a time in a land far far away there lived a little dog with a big tail and lost of fur


Side by Side with image

Once upon a time in a land far far away there lived a little dog with a big tail and lost of fur
Short Text

Images and Text in a Table

And the moon ran away with the fork and the spoon over hill and dale under blue skies
Table

Div's with Negative Margins

Margin-top = Negative half of the height
Working

Text Under Picture 1

Div's as TableCell
Note: Images will never wrap. Even though you have a fixed width, the real width is var


Div's as TableCell
If you attempt to float:left the images, you loose the vertical centering


Notes

http://designshack.net/articles/css/how-to-center-anything-with-css/

CSS is precise in separating formatting of block level vs. inline elements For example, the text-align: property is meant to center inline text or other inline content, not to center an entire block (notwithstanding some incorrect implementations of this property by some popular browsers). Secondly, authors may not realize that most block elements are rendered differently than tables—most blocks tend to expand to fill the available width of the container, whereas tables will tend to “shrink-wrap” to fit the content
http://theodorakis.net/blockcenter.html