Center a button between two others in OnsenUI - css

Question

How do I center a button between two other buttons in a toolbar?
Here's my code and resulting screenshot
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
I'm using OnsenUI (and will be using VUE with it) so is there a class I can simply add from bootstrap or any other framework included with OnsenUI?
Or can I use some custom CSS to do this?
Similar to this question but with OnsenUI and Monaca (so good for both ios and android)

Answer 1

<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<span class="stretcher"></span>
<button class="toolbar-button">
My title
<!-- text-purple center-block doesn't work -->
</button>
<span class="stretcher"></span>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
CSS:
#toptoolbar {
display: flex;
align-items: center;
justify-content: center;
}
.stretcher {
flex: 1;
}

Answer 2

// HTML
<div id="toptoolbar">
<button class="toolbar-button">
<i class="fa fa-comments" style="font-size:17px"></i>
</button>
<button class="toolbar-button title">
My title
<!-- text-purple center-block doesn't work -->
</button>
<button class="toolbar-button pull-right">
<i class="fa fa-ellipsis-v" style="font-size:17px"></i>
</button>
</div>
//CSS
.toolbar-button.title{
position: absolute;
left: 49%;
}
This is just a plain css solution.
updated Fiddle http://jsfiddle.net/JfGVE/2459/