一个盒子如何在另一个盒子中居中

写页面会碰到不少的居中问题，而有些情况下不能用margin:0 auto来实现水平方向的居中。
如下：

<style>

    #outer{
   
        background-color: #00a1ff;
        width:100px;
        height:100px;
        margin:200px auto;
        text-align:center;
        position:relative;

}
    #inner{
   
        height:50px;
        width:50px;
        background-color:#00ffaa;
        line-height:50px;
        position