Fill space between two static size divs

I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don’t know how to center this div

.container { width: 1200px; height: 100px; position: absolute; margin: 0 auto; background-color: grey;
}
.logo { width: 150px; height: 50px; float: left; background-color: darkred;
}
.text { width: auto; float: left;
}
.buttons { width: 200px; height: 70px; float: right; background-color: darkgreen;
}

<div class="container">
SOME CENTERED TEXT HERE
</div>

solution

One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won’t affect them, and it will only center the inline .text element.

.container { width: 1200px; height: 100px; position: absolute; margin: 0 auto; background-color: grey; text-align: center;
}
.logo { width: 150px; height: 50px; float: left; background-color: darkred;
}
.text { display: inline-block;
}
.buttons { width: 200px; height: 70px; float: right; background-color: darkgreen;
}

<div class="container">
SOME CENTERED TEXT HERE
</div>

Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don’t need to float the elements either (since they are flexbox items).

.container { width: 1200px; height: 100px; position: absolute; margin: 0 auto; background-color: grey; display: flex;
}
.logo { width: 150px; height: 50px; background-color: darkred;
}
.text { margin: auto;
}
.buttons { width: 200px; height: 70px; background-color: darkgreen;
}

<div class="container">
SOME CENTERED TEXT HERE
</div>