HTML:
<div></div>
利用定位
div{
height: 100px;
width: 100px;
border: 1px solid;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
利用flex
body{
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div{
height: 100px;
width: 100px;
border: 1px solid;
}
利用定位加上margin
div{
height: 100px;
width: 100px;
border: 1px solid;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
利用margin
body{
margin: 0;
}
div{
box-sizing: border-box;
height: 100px;
width: 100px;
border: 1px solid;
margin: calc(50vh - 50px) auto;
}