水平垂直居中布局

//html
<div class='parent'>
    <div class='child'>#</div>
</div>
//css
//1.定位 

.parent{position:relative;}

//子元素
.child{
width:100px;
height:100px;
position:absolute; 
//top:50%;
//left:50%;
//margin-top:-50px;
//margin-left:-50px;
top:calc(50%-50px);
left:calc(50%-50px);
}

//2.定位+transform


//子元素
.child{
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

//3.定位+margin

//子元素
.child{
width:100px;
height:100px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}

//4.Padding

//父元素
.parent{paddign:20px;}
//子元素
.child{height:200px;}



//5.flex


//父元素
.parent{
display:flex;
justify-content:center;
align-items:center;
}

//6.伪元素


.parent{
    height:200px;
    text-align:center;  //只对行内块元素有效
    background-color:red;
}
.child{
    width:100px;
    height:100px;
    display:inline-block;
    vertical-align:middle;
    background-color:blue;
}
.parent::before{
    content:'';
    width:0;
    height:100%;
    display:inline-block;  //伪元素是行内元素不能设置宽高，转为行内块元素设置宽高
    vertical-align:middle;
    background-color:yellow;
}


//7.子元素padding属性，背景裁剪到内容

.parent{
    width: 600px;
    height: 600px;
    background: red;
		}
.child{
    width: 100px;
    height: 100px;
    padding: calc((100% - 100px) / 2);
    background-clip: content-box;
    background: blue;
}