ringa_lee2017-04-17 13:11:33
I didn’t read your code.
But there are many ways to center the fast element:
1: display:inline-block
<style>
.total{width:1000px;height:auto;border:1px solid #ccc;text-align:center;}
.center{width:200px;height:50px;background-color:blue;display:inline-block;}
</style>
<p class='total'>
<p class='center'></p>
</p>
2: Unknown width and height: position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
<style>
.total{width:1000px;height:auto;border:1px solid #ccc;}
.center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
</style>
<p class='total'>
<p class='center'></p>
</p>
2: Known width and height: width:200px;height:200px;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px);
<style>
.total{width:1000px;height:auto;border:1px solid #ccc;}
.center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px)}
</style>
<p class='total'>
<p class='center'></p>
</p>
The above code has not been tested, if you have any questions please ask
巴扎黑2017-04-17 13:11:33
Infelx plus justify plus align are not easy to use, but remember to be compatible