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.?

Answer 1

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 ie 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> 

Answer 2

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 .

Answer 3

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