basically I'm trying to position an icon in the center of an inner div. In my code I have a div inside a div inside a div. I would like the to center text in the innermost div so I tried using margin-top: 50% Instead, the text went further past the halfway point. I thought the innermost div would find the halfway point in the parent div and position accordingly. Please explain why I am wrong. thx

```
    <html>
<body>
<div id="container" style="height:1000px;width:100%;background-color: green;position:absolute;">

    <div id="inner" style="height:50%; width:50%; background-color: black;margin-top:50%;display:inline-block;">
        <div id="inner" style="height:50%; width:50%; background-color: yellow"></div>
    </div>
</div>
</body>

```