<style>
#root{ /*父元素*/
width: 500px;
height: 500px;
display: table;
}
#root .no1{ /*子元素*/
display: table-cell;
vertical-align: middle; /*上下居中*/
text-align: center; /*左右居中*/
}
</style>
<div id="root">
<div class="no1">1</div>
</div>
<style>
#root{
width: 500px;
line-height: 500px;
background-color: red;
}
#root .no1{
width: 100%;
display: inline-block;
vertical-align: middle;
text-align: center;
}
</style>
<div id="root">
<div class="no1">1</div>
</div>
<style>
#root{
width: 500px;
height: 500px;
position: relative;
background-color: red;
}
#root .no1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div id="root">
<div class="no1">1</div>
</div>