Center with line-height without height

[White_horse]

As you know, we can use the line-height property with a value that is equal to the height property of a container to vertically center a single line within that container:

.container {
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  outline: 1px solid red;
}

<div class="container">
  <p>This is some text.</p>
</div>

DEMO

I have seen this method in many references, for example:

• Box to the right - Paul O’Brien
• AtoZ CSS Quick Tip: How to Vertically Center Text and Icons
• Centering Text with Line Height
• Center Text Vertically in CSS

Now the question is, why is the height property set? Is it necessary, or can we simply manage with line-height only?

[SamA74]

As usual, there are many ways to do the same thing in CSS (here is just one other). It is generally better not to define heights for containers, unless you have good reason. Mostly you should let the content define the height. This will make your design more fluid and able to cope with changes, such as the text wrapping to more lines or people zooming the text bigger.
In this example I have a similar result with no height defined, the equal space around the text is created by padding which expands the height to 200px. The difference is, it is not fixed, if more text were added, the text enlarged, or forced to wrap, the container, still being fluid, would accommodate that change.

[PaulOB]

@White_horse

Now the question is, why is the height property set? Is it necessary, or can we simply manage with line-height only?

Yes in your example (for a block element) you could just use the line-height property but of course would only be suitable for text that will never wrap to a new line. (The line-height method is really a hack because it was not really meant to centre anything but just create the height of the line that the text sits inside. It will behave differently on inline elements in that it will not expand the box as such and the outline will collapse around the text although the line-height will stretch to 200px.)

However these days I would use flex and be future proof in your design and allow that more text may be added at some stage and still remain centred.

e.g.

As @SamA74 has said there are many ways to do this (just as you saw in my box to the right examples) but usually there are some methods that are better and safer to use than others.

Always ask yourself the question “What if…”

e.g. What if there were two lines of text, What if there were 20 lines of text. What if there was no text. As long as you ask yourself those questions and satisfy yourself that your method can cater for those requirements or indeed won’t need to cater for those requirements then you can use the simplest method to achieve your aim.

Nearly all my thoughts when coding a page are aimed towards “What happens next”

[RyanReese]

@PaulOB

Always ask yourself the question “What if…”

e.g. What if there were two lines of text, What if there were 20 lines of text. What if there was no text. As long as you ask yourself those questions and satisfy yourself that your method can cater for those requirements or indeed won’t need to cater for those requirements then you can use the simplest method to achieve your aim.

Nearly all my thoughts when coding a page are aimed towards “What happens next”

I review a handful of designs each week at my work to ensure that in-house developers or contractors can accomplish it, and within the timeframe. I see a lot of designs. I wish more designers would think about this sort of stuff because there are many panels or elements, that when I ask “what happens if XYZ is there”, they have no answer. Exactly those questions. What happens if there is a lot of text? What if the client puts in a shorter image than you expect? It needs to be in the forefront of your thought process.