Translate only works to align one element
It allows you to use position: absolute cleanly while subtracting those elements' size from the page
THIS IS A DIV
.caption
.divcont
.parent
.parent { position: relative; } .divcont { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid; width: 500px; height: 300px; } .caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .another { margin-left: 10px; } @media (min-width:800px) { .csspa { position: absolute; right: 15%; top: 20%; } }