How do I vertically and horizontally center all these elements?

Question

I want to create a header area that has previous and next arrow buttons all the way on the left and right while having some header text centered in the middle of the header area. The trick is that I also want all three elements within the header area to be vertically centered as well, regardless of whether the header text element is so long that it causes it to have a greater height than the arrow links or not.

Here is a rough sketch of what I am trying to achieve:

In the top version, the arrows (the black boxes) are taller than the header text, however, in the bottom version, the text is taller than the arrows. In all cases, I want everything vertically centered, and for the header text to be horizontally centered (which is not shown in my image).

At the moment, this is the best HTML/CSS I have come up with, but I know something is missing, and I'm not sure what it is.

HTML:

<div class="container">
  <a href="#" class="prev"></a>
  <h1>Header text</h1>
  <a href="#" class="next"></a>
</div>

CSS:

.container {
  display: table;
}

.prev, .next {
  background: #000;
  display: table-cell;
  height: 50px;
  vertical-align: middle;
  width: 20px;
}

.prev {
  float: left;
}

.next {
  float: right;
}

h1 {
  display: table-cell;
  margin: 20px;
  text-align: center;
  vertical-align: middle;
}

Can anyone please offer some advice on how I should change my HTML/CSS to get what I want? Thanks.

Answer 1

How about making the container position:relative and positioning the arrows absolutely?

.container{position:relative;}
.prev, .next {
    background: #000;
    height: 50px;
    width: 20px;
    position:absolute;
    top:50%;
    margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
    text-align: center;
    padding:0;
    margin:0;
    margin:0 20px;
}

Demo at http://jsfiddle.net/gaby/M4crZ/1/

---

Original attempt did not center the text vertically...

Try this one better

.container{position:relative;display:table;border:1px solid #ccc;}
.prev, .next {
    background: #000;
    height: 50px;
    width: 20px;
    position:absolute;
    top:50%;
    margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
    text-align: center;
    padding:0 20px;
    margin:0;
    display:table-cell;
    vertical-align:middle;
}

Demo at http://jsfiddle.net/gaby/M4crZ/3/