Aligning contents with Transform: translate(x,y)

by jim ulle

HTML

<div id="container">
    <div id="content">

    </div>
</div>

CSS

#container {
    height: 300px;
    width: 300px;
    position: relative;
    background-color: #663399;
}
#content {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: rgba(255,0,0,0.5);
}