一.已知元素的宽高
方法一
.node-father{
position: relative;
}
.node-child{
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
}
方法二
.node-child{
width: 100px;
height: 50px;
display: inline-block;
position: absolute;
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
margin:auto;
}
方法三.
.node-father{
width: 300px;
height: 300px;
position: relative;
}
.node-child{
width: 100px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
left:calc(50% - 50px);
}
二.未知宽高
方法一
.wrapItem{
background:green;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50% , -50%);
}
方法二
.wrapBox2{
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
方法三
.wrapBox3{
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.wrapItem3{
width: 100px;
height: 50px;
display: inline-block;
}
