How to Center <div> Element Inside of Another <div>Element

Centered <div> inside another <div>

To achieve the above effect to center a <div> element inside of another <div> element

<div id="outer">
   <div id="inner">
      This is inner div.
   </div>
</div>

The CSS

#outer {
    background-color: #FFFFFF;
    padding: 15px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
#inner {
    color: #000;
    background-color: #000000;
    padding: 10px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}