How to center a block level element vertically?

Question

Say I have a like so:

<table style="margin-left: auto; margin-right: auto;">
  <tr>
    <td>
    </td>
  </tr>
</table>

The margin-* attributes instruct the table to center itself within its parent element.

Is there a similar way to center the element vertically?

possible duplicate of [Cross browser div center alignment using CSS](http://stackoverflow.com/questions/2935404/cross-browser-div-center-alignment-using-css) — BalusC, Jul 24 '10 at 01:39

score 4 · Accepted Answer · answered Jul 24 '10 at 01:40

4

This is a very often requested thing to do. There's no simple way to do vertical alignment. There's the vertical-align attribute, but it's for line-alignment of an inline element. Check out this link for different ways to do vertical-centering.

Edit: Here's another good link to get you started.

answered Jul 24 '10 at 01:40

TheCloudlessSky

18,608
15
75
116

2

Haha, you were first so you get dibs. :) I'll delete mine. – attack Jul 24 '10 at 01:48
And I complained when they took out the `` tag! – Nathan Osman Jul 24 '10 at 01:49
@attack - Haha, I was just re-loading to delete mine and saw yours disappear. Cheers! – TheCloudlessSky Jul 24 '10 at 01:50
@George - It can be quite a pain to center but I agree with the 2nd link where `Method 3` is easier to implement. – TheCloudlessSky Jul 24 '10 at 01:52

score 0 · Answer 2 · answered Apr 20 '13 at 01:25

0

I know this is an old question, but for anyone who stumbles across this in search of a solution to a similar question, I've written a jQuery plugin that can center any block element very easily. This is not to promote my own project, I honestly just want to help out and contribute where I can. There's a link and demo here.

answered Apr 20 '13 at 01:25

rtheunissen

7,347
5
34
65

Blaming DNS Propagation. :p Check now? – rtheunissen Apr 20 '13 at 05:38

How to center a block level element vertically?

2 Answers2

Linked