Div centralizado dentro do outras Divs

by Rafael Nepomuceno

HTML

<div class="base">
    <div class="container">
        <!-- Centered inside whatever sized container -->
        <div class="outer">
            <div class="inner">
                <div class="centered">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam assumenda blanditiis.</p>
                    <div class="positioned-absolutely">Foo</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.base {
    width: 100%;
    height: 100%;
    resize: both;
    overflow: auto;
    background: #EEE url('http://www.photosurfer.com/images/resize-cursor.PNG') no-repeat right bottom;
}
.container {
    width: 70%;
    height: 70%;
    margin: 40px auto;
    background: #BBB;
}
.outer {
    display: table;
    width: 100%;
    height: 100%;
}
.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.centered {
    position: relative;
    display: inline-block;
    width: 50%;
    padding: 1em;
    background: #ffa500;
    color: #fff;
}
.positioned-absolutely {
    position: absolute;
    top: -2em;
    right: -2em;
    background: #00f;
    padding: 1em;
}