how to center php paginator with css - php

Question

I'm trying to center my paginator.
I keep trying different things but it either goes all the way to the right, or it doesn't get centered.
This is my code :
<?php
$pagination = $products->pagination();?>
<?php foreach($pagination->range(10)as $r): ?>
<div class="paginator">
<ul>
<li><a<?php if($pagination->page() == $r) echo ' ' ?> href="<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>
</ul>
</div>
<?php endforeach ?>
?>
and here is my css
.paginator {
width: 100%;
margin-left: auto;
margin-right: auto;
/*position: absolute;*/
/*bottom: 0;*/
/*left:0;*/
/*right:0;*/
}
.paginator li {
float: left;
padding: 5px 8px 8px 8px;
font-size: 13px;
font-weight: 600;
transition: .5s;
border: thin solid #2A4143;
/*border-radius: 0 25px 0 0;*/
top: 100%;
left: -1px;
height: 28px;
width: 28px;
background-color: #F5F5F5;
display: inline;
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*max-height: 100px;*/
/*position: absolute;*/
}

Answer 1

Add text-align: center; to .paginator and remove float: left; from .paginator li
EDIT: added a container for all the paginators and then made .paginator to disply: inline-block; and added text-align: center; to the new container in CSS. Also remove width: 100%; from .paginator
Also to note, make that container outside of your foreach loop.
See working example here:
.container {
text-align: center;
}
.paginator {
margin-left: auto;
margin-right: auto;
text-align: center;
display: inline-block;
/*position: absolute;*/
/*bottom: 0;*/
/*left:0;*/
/*right:0;*/
}
.paginator li {
padding: 5px 8px 8px 8px;
font-size: 13px;
font-weight: 600;
transition: .5s;
border: thin solid #2A4143;
/*border-radius: 0 25px 0 0;*/
top: 100%;
left: -1px;
height: 28px;
width: 28px;
background-color: #F5F5F5;
display: inline;
/*display: block;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
/*max-height: 100px;*/
/*position: absolute;*/
}
<div class="container">
<div class="paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
<div class="paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
<div class="paginator">
<ul>
<li><a>Echo'd PHP stuff here</a></li>
</ul>
</div>
</div>