Is there a way to horizontally center a div with margins using CSS?
<div id="container">
<div id="center_me"></div>
</div>
#container{
position:relative;
width:100%;
height:400px;
}
#center_me{
position:absolute;
width:100%;
margin:0 50px;
max-width:300px;
height:100%;
left:50%;
-webkit-transform:translateX(-50%);
}
I want to maintain a margin on the centered div, so setting margin:0 auto won't work. The technique I am using with "left:50%" and "translateX(-50%)" does not account for the margin. Is there a way to achieve this fluidly while keeping the same fixed margin when the window size changes? Am I missing something obvious?
Pure CSS solutions only please. Thank you.