how to center a relative div (with absolute div's inside) [duplicate]

Question

I want to center the div (container) horizontaly. I tried margin: 0px auto; but it didn't work.

#container {
  position: relative;
}
#abs1{
  width:350px;
  height:230px;
  position: absolute;
  left: 0px;
  top: 0px;
  border:2px solid black;
  }
#abs2{
  width:250px;
  height:100px;
  position: absolute;
  left: 380px;
  top: 0px;
  border:2px solid black;
  }

<div id="container">
    <div id="abs1" ></div>
    <div id="abs2" ></div>
</div>

Answer 1

If you want to center a container using margin: 0 auto; you need to also give that container a width.

#container {
  position: relative;
  margin: 0 auto;
  width: 530px;
}
#abs1{
  width:350px;
  height:230px;
  position: absolute;
  left: 0px;
  top: 0px;
  border:2px solid black;
  }
#abs2{
  width:250px;
  height:100px;
  position: absolute;
  left: 380px;
  top: 0px;
  border:2px solid black;
  }

<div id="container">
    <div id="abs1" ></div>
    <div id="abs2" ></div>
</div>