How can I center two floated elements within a container?

How can I center two floated elements within a container?

This is driving me crazy. I am relatively new to this stuff so trying to
figure this one out for the past hour. I'll be really thankful if someone
can help me with this.
I have the following code:
<div class="middle_box">
<div class="box left">
Some large text
</div>
<div class="box right">
Some large text as well
</div>
</div>
CSS:
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
}
.box {
float: left;
font-size: 21px;
margin-right: 50px;
margin-top: 25px;
padding-top: 25px;
width: 390px;
}
As you can tell the width of the container is 960px. Now, I want to center
the two .box elements within the 960px container and that's where I am
lost.
What did I try?
I tried using margin: 0px auto; and I tried faking it by adding
margin-left on both sides but it just didn't work. How can I achieve this?