.content{ //父元素
width: 200px;
height: 200px;
border: 2px solid gainsboro;
position: relative;
}
.box{//子元素
width: 50px;
height: 50px;
position: absolute;
border: 2px solid salmon;
float: left; //子元素进行浮动
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box{//子元素 父元素进行绝对定位
width: 50px;
height: 50px;
position: absolute;
border: 2px solid salmon;
float: left;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.content{ //对父元素使用
width: 200px;
height: 200px;
border: 2px solid gainsboro;
display: flex;
justify-content: center;
align-items: center;
}
.content{ //对父元素使用
width: 200px;
height: 200px;
border: 2px solid gainsboro;
display: table-cell;
vertical-align:middle;
}
.box{
width: 50px;
height: 50px;
border: 2px solid salmon;
margin:auto;
}
原文：https://www.cnblogs.com/kbinblog/p/10914250.html