Translate only works to align one element
It allows you to use position: absolute cleanly while subtracting those elements' size from the page
.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%;
}
}