CSS for content alignment

Question

I have a div tag with fixed width and height and I want another div tag positioned at the exact center of the parent div. I have tried margin=auto but it doesn't solve the problem. Any pointers? Thanks

Answer 1

Try this: (fiddle)

div.outer {
    display: table-cell;
    width: 500px;
    height: 500px;
    vertical-align: middle;
    text-align: center;
    background: blue;
}

div.inner {
    width: 200px;
    height: 200px;
    background: red
    display: inline-block;
}