Six ways:
Absolute plus margin solution fixed plus margin solution display:table solution line-height solution flex layout solution transform unknown element width and height solution
Absolute + margin scheme
div{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%:
margin-top: -50px;
margin-left: -50px;
}
Fixed plus margin scheme
div{
position: fixed;
width: 100px;
height: 100px;
top: 0;
right:0;
left: 0;
bottom: 0;
margin: auto;
}
Display: table scheme
div{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
}
The line-height scheme for the inline element
div{
text-align: center;
line-height: 100px;
}
Flex Flexible Layout Solution
div{
display: flex;
align-items: center;
justify-content:center
}
Transform unknown element width and height solution
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}