How to structure this HTML to center stuff in a div - html

Question

Sometimes when I come back to html I forget the simple things...
I want to be able to get the spans inside the div to center. IDK if I have it structured right, feel free to suggest anything
https://jsfiddle.net/yxg1zsac/
.define_link {
background: rgba(0,0,0,.3);
border-radius: 10px;
padding: 5px;
width: 200px;
margin: 5px auto;
font-size: 20px;
display: inline-block;
font-weight: bold;
text-align: center;
}
.pagination {
width:100%;
margin:auto
}
<div class="pagination">
<span class="define_link">previous</span>
<span class="current">Page 2 of 88.</span>
<span class="define_link">next</span>
</div>

Answer 1

Try this:
https://jsfiddle.net/tobyl/yxg1zsac/1/
Critical CSS:
.pagination {
text-align: center;
}

Answer 2

i think you want to this check it
https://jsfiddle.net/bhavhirani/gnrqxxka/1/
.define_link {
background: rgba(0,0,0,.3);
border-radius: 10px;
padding: 5px;
width: 200px;
margin: 5px auto;
font-size: 20px;
display: inline-block;
font-weight: bold;
text-align: center;
}
.define_link.prev{
float:left;
}
.current {
display: block; float: left; width: 30%; margin: 10px auto; text-align: center;
}
.define_link.next{
float:right;
}
.pagination {
width:100%;
margin:auto;
}
<div class="pagination">
<span class="define_link prev">previous</span>
<span class="current">Page 2 of 88.</span>
<span class="define_link next">next</span>
</div>