css水平垂直居中

 

html

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

 

css

1 flex布局

 #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
    }

2 position：absolute

#outer{
        position:relative;
        width:500px;
        height:500px;
        background:yellow;
        
    }
    #inner{
        height:100px;
        width:100px;
        background: red;

        position:absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
    }