Center a div

center a html element in another element

HTML

<p>True Center</p>
    <div class="outterDiv">
        <div class="innerDiv trueCenter"></div>
    </div>

CSS

.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: 860px;
        height: 327px;
    }
    .innerDiv
    {
        background-color: red;
        width: 100%;
        height: 100%;
        margin: 10px;
     }