Line-height vs paddings to vertically center one-lined text

Question

I can vertically center one-lined text with line-height, but also with padding-top and padding-bottom.

What are the pros and cons of each?

body {
    font-size: 12px;
    font-family: sans-serif;
}

div {
    border: 1px solid #333;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}

.vcenter1 {
    line-height: 50px;
}

.vcenter2 {
    padding-top: 19px;
    padding-bottom: 19px;
}

<div class="vcenter1">Lorem ipsum line-height...</div>

<div class="vcenter2">Lorem ipsum padding...</div>

This sounds a bit like "show me ways to vertically align things using CSS", a topic which has been discussed *ad nauseam* all over the Internet. Simply use one of the ways that works for you. Other ways to do it ways include `display: flex`, `display: table-cell`, [`position: relative` with `top` and `transform`](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/). In any case, questions that invite open-ended discussions are [off-topic](http://stackoverflow.com/help/on-topic) here. — Tomalak, May 24 '15 at 10:33
@Tomalak I only want to know the difference of these two scenarios in particular. Right now, to me, they both seem to do the same thing. I'm afraid there might be things I don't know of that I'm not taking into consideration when using either method. — Kid Diamond, May 24 '15 at 10:36
We should avoid using padding to center the content because we will never know the exact height of the container. the font's height render differently in different browsers. — Mr_Green, May 24 '15 at 10:36

Alohci · Answer 1 · 2015-05-24T11:01:29.890

1

Purely in terms of vertically centering, it matters not a jot. But note that in the second case, you are padding around a line box whose height is proportional to the font-size. Different browsers use slightly different proportions by default, so the bordered box will be different sizes in different browsers. That won't happen in the first case.

edited May 24 '15 at 11:01

answered May 24 '15 at 10:29

Alohci

70,004
12
103
143

score 1 · Accepted Answer · edited May 23 '17 at 12:14

For me both of the methods are valid for instances where the line of text is guaranteed to only ever span one line (either by nature of the containers width being fixed or by manipulation of the content and/or CSS white-space property), but it depends on your intention as to which is more appropriate:

If you want the height of the element the text is contained within to be fixed, then using line-height seems most appropriate and maintainable because changes to the size of the font wont impact the height of the container (unless the font becomes taller than the container).
If however the height of the container is not fixed and it's more important that the white-space either side of the font remains, padding is the more appropriate option.

There are of course other ways of centring text vertically within an element, this previous question How do I vertically center text with CSS? has a lot of useful information on the topic.

Line-height vs paddings to vertically center one-lined text

2 Answers2