Jonathan Wood Jonathan Wood - 1 year ago 45
CSS Question

Center Text Vertically Within <DIV>

I have a

element with a fixed height, and I'd like to center some text vertically within that element.

I've been trying to follow the instructions at However, it doesn't seem to work for me.

I've posted what I'm trying at If I change the HeaderBrand's margin-top to about -22px, it seems about right.

Can anyone see why the technique described in the article is not working as expected for me?

Note: The best answer here only works if the text doesn't wrap to a second line.

Answer Source


<!DOCTYPE html>
  .outer { outline: 1px solid #eee; }
  .outer > p { display: table-cell; height: 200px; vertical-align: middle; }

<div class="outer">
  <p>This text will be vertically aligned</p>

<div class="outer">
  <p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>

works in modern browsers, regardless of whether text spans only one or multiple lines.

Also updated the fiddle at Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download