CODEWITHSUNDEEP
htmlcsshtml-table
Deano
Deano

Reputation: 1760

How to Vertically Align a Table in CSS

How can I vertically align a table in the middle of the screen with css?

Upvotes: 5

Views: 18291

Answers (3)

Chris Visser
Chris Visser

Reputation: 1647

Shortly said, just make your body a table, because vertical-align does work on table-cells: 

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

#wrapper { 
  display: table-cell; 
  vertical-align: middle;
  height: 80%;
}

This will vertical align your pagewrapper to middle and let it be fluid 80%

Upvotes: 1

da5id
da5id

Reputation: 9136

If you can give the table a fixed height, then feel free to adapt the CSS from this site I've just done.

Bit complicated to explain, but basically you set a 1 pixel high 'horizon' at 50% height of the screen around your content, then offset the top of the element to be centred (i.e. your table) by 50% of its height.

EDIT: Here's the article I originally made my solution from, with explanation & everything.

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

Generally something along the lines of this works pretty well in any block element with a defined height. 

table { 
 position: absolute;
 top: 50%;
 margin-top: -50%;
}

Centering on the page is harder since you don't have a defined height, but I think this works.

html {
 height: 100%;
}

You may encounter some browser differences, act accordingly.

Upvotes: 1

Related Questions