0

How exactly does one center text vertically in a div with height 50%? I tried setting line height to 25% or 100%. Since I need the div to fill in half of the height of the screen at all times I cant use padding otherwise I already would have to solve the issue.

Any ideas?

Edit: I dont see how this a duplicate. In stackoverflow they only talk about centering text on static heights.

Daniels
  • 111
  • 1
  • 13
  • @Josh Crozier that is not a duplicate since im talking about percentage height not a height in pixels – Daniels Feb 03 '15 at 00:47
  • 1
    The question this is a duplicate of covers all types of content, both text and non-text, both static and dynamic dimensions. – Etheryte Feb 03 '15 at 00:48
  • @Daniels Yeah, as Nit points out, the answer in linked question covers all instances. It shouldn't matter whether the height of the element is `50%`. – Josh Crozier Feb 03 '15 at 00:49
  • @Daniels Here is a quick example - http://jsfiddle.net/t95fk66k/ – Josh Crozier Feb 03 '15 at 00:51
  • @Josh Crozier the answer to the other post uses transforms but I prefer not to use transforms for such tasks if possible. Im not entirely sure how good the support is on ie9. I will check on canIuse.com – Daniels Feb 03 '15 at 00:54
  • @Daniels There are 5 different approaches in that answer. Here is one using flexboxes where the parent `div` has a height of `50%`.. http://jsfiddle.net/v1hbzpn1/ – Josh Crozier Feb 03 '15 at 00:56
  • @Josh Crozier the other answers assume the text is static or the height is 100%. The problem with flexboxes are that they only properly supported starting with ie10. Transforms as you showed me is probably the best method. It is weird that they dont have a simple vertical align method for text – Daniels Feb 03 '15 at 01:04

0 Answers0