Centralized div between two div's using only CSS

Question

I would like to know how do i centrilize one div, with unknown width only using CSS.

I desire something like:

Using <center> i have:

<div style="float: left">
    <p:commandButton  .../>
</div>
<center>
    <p:commandButton ..."/>
    <p:commandButton .../>
</center>
<div style="float: right">
    <p:commandButton .../>
</div>

How do that only using css?

Note: I don't use margin: 0 auto just because the size of centralized div is unknown.

Answer 1

1) Set text-align:center on the parent div (ie the parent of the elements which you have mentioned)

2) Replace the center element with a div and set the rule display:inline-block on it.

FIDDLE

.parent {
  text-align: center;
}
.middleBtns {
  display: inline-block;
}

<div class="parent">
  <div style="float: left">
    <button type="button">
      < </button>
  </div>
  <div class="middleBtns">
    <button type="button">btn1</button>
    <button type="button">btn2</button>
  </div>
  <div style="float: right">
    <button type="button">></button>
  </div>
</div>

Answer 2

This seems to get asked a lot here, look here How to horizontally center a <div> in another <div>?

Essentially the inner element that you are wanting to center requires a display type of inline:block; and the container wrapping this element which you want to center it in you set a property of text-align:center;