center inner div in outer div

HTML

<div id="container">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>

CSS

#container {
    height:100px;
    width:100px;
    background-color:red;
}
#outer {
    height:100%;
    background-color:green;
    display: flex; /* establish flex container */
    justify-content: center; /* center #inner horizontally */
    align-items: center; /* center #inner vertically */
}
#inner {
    height:10px;
    width:10px;
    background-color:yellow;
}