Align element in the vertical middle of the parent using line-height property

Question

I have the following code:

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}
span {
  display: inline-block;
  line-height: 100px;
}

<div>
  <span>Hey Align me in the middle</span>
</div>

If am keeping the line-height exatly same as the height of the parent div,span is aligning into the center.

Lets say some case where my parent div height is set to auto ,in that case if i want to display the span in the middle of the parent,how can i do that? I want a solution with using line-height only,in other ways i can achieve.

I have tried the following with % but it seems not working.

line-height: 100%;

but its not same as 100% of the parent ,its 100% of the child span,How can i make equal to the parents height.?

Using only the code that you've given, even if `
` has `height:auto` the `` will still be vertically centered ([see JSFiddle](http://jsfiddle.net/429veh66/)). Do you have specific HTML in mind that poses a problem for you? Might be worth specifying in your question. — Serlite, Jun 24 '15 at 13:35
What I understand the question is Op wants to replace `line-height:100px` with `line-height:100%`, which is not going to work. — Stickers, Jun 24 '15 at 13:37
@Pangloss Just noting that using the given HTML and CSS, even if he swaps the `
` height to auto, no alteration to the remaining code would be necessary to keep the child vertically centered. The problem case could use some more clarification so less guesswork is involved. =P — Serlite, Jun 24 '15 at 13:42

score 1 · Answer 1 · edited May 23 '17 at 10:28

No, you can't do it that way. Percentage line height is relative to the font size of the element itself, NOT the height of the container.

You'll have to use a fixed value i.e. px if you still want to use the trick, otherwise see this post fore more options - How do I vertically center text with CSS?

Note, it would be more reasonable if you do it this way, so that it also works when the text wraps.

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  line-height: 100px;
}
span {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

<div>
  <span>Hey, align me in the middle.</span>
</div>

If you you know the text is not going to wrap for sure, it can be as simple as this.

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  line-height: 100px;
}

<div>Hey, middle.</div>

score 0 · Answer 2 · answered Jun 24 '15 at 13:36

If you want to avoid the use of the line-height, you can use the transform: translateY(-50%) or the display: table and display: table-cell:

.element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

.container {
   height: 300px;
   width: 200px;
   background-color: red;
}


.fake-table{ display: table; height: 300px; }
.fake-td{display:table-cell ;vertical-align: middle }

See the live example.

score 0 · Answer 3 · edited Dec 05 '17 at 11:59

The answer is simple. Because line-height is strictly referring to inline elements, you'll want to treat the content box as inline text.

Here we have two divs, a wrapper and content:

<div class="wrapper">
    <div class="content"> Some stuff</div>
</div>

So, first thing's first, we'll need to set a height for the wrapper element, let us give it a height of 600px. In order for our vertical-align to work properly, we'll need to give it a line-height: 600px as well, note it's the same height as the div. (you can use javascript to do this part if there are dynamically added things).

We should give it some properties to make it more visible so we'll add a border to it. Oh, and we want the content to be centered as well, so we'll give it a text-alignment of center

.wrapper{
   height: 600px;
   border: solid 1px black;
   line-height: 600px;
   text-align: center;
}

Next, we will deal with the actual content itself. First thing is first, we need to tell the browser that it is a display: inline-block; And here is what you were asking for: vertical-align: middle. After we'll give it a height: 200px and give it some distinguishing qualities as well, so a border: solid 1px black; should do the trick. And last but not least, we'll need to reset a couple of things that it will inherit from the parent (text-align: center; line-height: normal).

/* enter code here */

.content{
    display: inline-block;
    text-align: left;
    line-height: normal;
    height: 200px;
    border: solid 1px black;
    vertical-align: middle;
    width: 200px;
}

You can see the working product here

Align element in the vertical middle of the parent using line-height property

3 Answers3