垂直水平居中的四种方法

方法一 待居中元素具有确定的高度和宽度

css：

.parent{

positive:relative;

}

.child{

width:200px;

height:200px;

positive:absolute;

left:50%;

top:50%;

margin-left:-100px;     <!--1/2宽度-->

margin-top:-100px;   <!--1/2高度-->

}

方法二： 待居中元素具有确定的高度和宽度

css:

.parent{

width:500px;

height:500px;

positive:relative;

}

.child{

positive:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%)

}

方法三： 使用flexbox

css:

.parent{

width:500px;

height:500px;

display:flex;

justify-content:center;

align-items:center;

}

方法四、使用table,增加一层嵌套

css:

.task{
display: table;
width: 500px;
height: 500px;
border: 1px solid #999;
}
.box-wrap{
display: table-cell;
vertical-align: middle;       <!--垂直居中-->
}
.box-set{
margin: 0 auto;                <!--水平居中-->

width:200px;

height:200px;

background-color: gray;
}

html:
<div class="task">
<div class="box-wrap">    <!--增加的一层嵌套-->
<div class="box-set">
</div>
</div>
</div>