css水平垂直居中

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

 #outer{
        width:500px;
        height:500px;
        background:yellow;
        display: flex;
        justify-content:center;   /*justify-content属性定义了项目在主轴上的对齐方式
        align-items:center;       /*align-items属性定义项目在交叉轴上如何对齐。
    }
    #inner{
        height:100px;
        width:100px;
        background: red
    }