盒子的居中问题

居中：分位水平居中和水平垂直居中。

1.水平居中

• 使用外边距水平居中：

margin：0 auto；

• 如果内部元素为inline-block；则只需设置其父元素的text-align：center；

2.水平垂直居中

• 使用定位水平垂直居中：
• position：absolute；left：50%；top:50%；margin-left：-1/2*height ；margin-top：-1/2*width；
• position：absolute; left：50%；top：50%；transform：translate（-50%，-50%）； 

定义两个盒子------wrapper和 .header
.wrapper{
    background: pink;
    width:100px;
    height:200px;
    position:relative;
}
.header{
    background:red;
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

}

····················

• margin和定位组合使用：

.wrapper{
    background: pink;
    width:100px;
    height:200px;
    position:relative;
}
.header{
    background:red;
    width:50px;
    height:50px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    margin: auto;

}