child div align center on parent div with overflow?

Question

Hello Stackoverflow Team,

How can the child div inside the parent div with overflow have a right and left margin? I'm trying to solve the issue but it does not give a clean solution for it.

Attempt:

margin-right wont work

 div { border: 1px solid black; } .parent { width: 300px; height: 300px; margin: auto; position: relative; overflow: auto; } .child { width: 350px; height: 150px; top: 50px; margin-left: 20px; margin-right: 20px; position: absolute; display: inline-block; } 

 <div class="parent"> <div class="child"></div> </div> 

My unclean Solution:

 div { border: 1px solid black; } .parent { width: 300px; height: 300px; margin: auto; position: relative; overflow: auto; } .child { width: 350px; height: 150px; top: 50px; margin-left: 20px; border-right: 20px solid red; position: absolute; display: inline-block; } 

 <div class="parent"> <div class="child"></div> </div> 

any better way to solve the issue?

Answer 1

Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.

 div{ border: 1px solid black; } .parent { width:300px; height:300px; margin:auto; position: relative; overflow: auto; } .child { width:350px; height:150px; top: 50px; margin: 50px 20px 0; display: inline-block; } 

 <div class="parent"> <div class="child"></div> </div> 

Update

If you need the child div to be position: absolute you will have to wrap it in another div as follow:

 div{ border: 1px solid black; } .parent { width:300px; height:300px; margin:auto; position: relative; overflow: auto; } .child { border-color: red; position: absolute; top: 20px; height: 150px; } .sub-child { width:350px; height:150px; margin: 0 20px; display: inline-block; } 

 <div class="parent"> <div class="child"> <div class="sub-child"></div> </div> </div>