HTML


<div class="container">
    <div class="outer">
        <div class="inner">
            <div class="wrap">
                <div class="content">
                    <p>Hello World!</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS


p{
    color:white;
    font-size:2em
}
.container { 
    width: 100%; /* define width */
    background:orange;
}
.container .outer {
    width: 100%;
    padding-top: 100%; /* defines aspect ratio */
    position: relative;
}
.container .outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow:hidden;
}
.wrap{
    display:table;
    width:100%;
    height:100%;
}
.content{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

Demo

Comments