Center a div

center a html element in another element

by Joseph Tveter

HTML

<p>True Center</p>
    <div class="outterDiv">
        <div class="innerDiv trueCenter"></div>
    </div>
    <p>Horz Center</p>
    <div class="outterDiv">
        <div class="innerDiv horzCenter"></div>
    </div>
    <p>Vert Center</p>
    <div class="outterDiv">
        <div class="innerDiv vertCenter"></div>
    </div>

CSS

.vertCenter
    {
        position: absolute;
        top:50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .horzCenter
    {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .trueCenter
    {
        position: absolute;
        left: 50%;
        top: 50%;
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .outterDiv
    {
        position: relative;
        background-color: blue;
        width: 10rem;
        height: 10rem;
        margin: 2rem;
    }
    .innerDiv
    {
        background-color: red;
        width: 5rem;
        height: 5rem;
    }