<style>
*{padding:0;margin:0;box-sizing: border-box;}
.cf::after {content: ""; display:block; clear: both;}
#parent{ width: 800px; background:orangered; margin:0 auto; position:relative;}
.child{width: 100px; height:100px; opacity: 0.5;}
.child1{background:lime; position:relative; left:200px;top:100px;}
.child2{background:orchid; position:absolute; left:50%; margin-left:-400px; top:100%; width: 100%;}
.child3{background:palegoldenrod;
position:absolute; left:50%; top:50%;
margin-left:-50px; margin-top:-50px;
}
</style>
.child1{background:lime; position:relative; left:200px;top:100px;}
.child2{background:orchid; position:absolute; left:50%; margin-left:-400px; top:100%; width: 100%;}
.child3{background:palegoldenrod; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}