How to center a percentage width div horizontally

<div id="box">  
    <div id="container"></div>  
</div>  

#box{  
    position: relative;  
  
}  
#container{  
    position: absolute;  
    width:30%;  
    height:100px;  
    background: #ccc;  
    left: 0;  
    right: 0;  
    margin:100px auto;  
}