vertical-align: middle and position: absolute

Question

I would like overlay with text. Now i have: http://jsfiddle.net/9DLyE/9/ but in this example not working vertical-align: middle. I try use display: table; and display: table-cell; but this not working with position absolute. How can i make it in http://jsfiddle.net/9DLyE/9/ ?

<div id="main">
    <div>TITLE</div>
    <div>BODY</div>
    <div>COMMENT</div>
    <div><textarea></textarea></div>
    <div id="overlay">@@@@@@</div>
</div>
<button>overlay</button>

#main {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position:relative
}
#overlay{
    background:rgba(0, 84, 214, 0.5);
    height:100%; width:100%;
    position:absolute;
    top:0; left:0;
    display:none;
    text-align: center;
    vertical-align: middle;
}

Try changing #overlay `top: 0;` to `top: 50%` then `margin-top: -20px` The margin top needs to be minus half of what the text is. — ChuckJHardy, Jun 05 '13 at 13:49
http://stackoverflow.com/questions/8896965/css-vertical-align-table-cell-dont-work-with-position-absolute — Pete, Jun 05 '13 at 13:58

Derek Henderson · Accepted Answer · 2013-06-05T14:57:48.897

1

Instead of vertical-align: middle; give the overlay a line height that is the same as your main div:

#overlay {
    line-height: 200px; // the height of #main
}

Demo

edited Jun 05 '13 at 14:57

answered Jun 05 '13 at 13:49

Derek Henderson

9,388
4
42
71

score 0 · Answer 2 · answered Jun 05 '13 at 14:05

0

I don't like using Tables at all but maybe you could do this, at least that way it would guarantee it to be in the middle always.

<div id="main">
    <div>TITLE</div>
    <div>BODY</div>
    <div>COMMENT</div>
    <div><textarea></textarea></div>
    <div id="overlay">
        <table id="wrapper">
            <tr>
                <td>@@@@@@</td>
            </tr>
        </table>
    </div>
</div>
<button>overlay</button>

http://jsfiddle.net/9DLyE/9/

there are ways to do it with images but it's a bit tricky with text.

p.s here is the CSS for the table you'll need

#wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

hope this helps.

answered Jun 05 '13 at 14:05

RustyCollins

349
2
7

**One should never use tables for layout only**, and there is certainly no need, as this styling can be achieved with just CSS. – Derek Henderson Jun 05 '13 at 14:20
but if you set a line height of 200px on the element in question then that doesn't assure it will align to the middle of it's container, this method would ensure no matter the size of the container, it will always be in the middle, therefore surely providing a robust solution? images are easier to center but text is still tricky – RustyCollins Jun 05 '13 at 14:35
If you set the line height equal to the height of the container, any single-line will align vertically. There are other solutions, of course, perhaps even more robust solutions, but using table layout purely for styling reasons is absolutely the wrong way to go. – Derek Henderson Jun 05 '13 at 14:37
I'm not denying that, I'm saying if you need to position an element to the middle on an element with an unknown height IE, if the height is dynamically set then setting a fixed 200px for height won't guarantee you it to be in the middle, it will just be 200px from the top of the container. look at this post from CSS-tricks, using the method provided is only supported by IE 8+ which isn't good enough, so tables are your best bet http://css-tricks.com/centering-in-the-unknown/ – RustyCollins Jun 05 '13 at 14:55
The OP very clearly gave his container a fixed height, and I very clearly stated in my post that the line height needs to match the container height, so there should be no ambiguity as to where that 200px came from. Of course, with a differently-sized container that would not work, but I would expect that if you're going to edit the CSS to give the container a different height you will also change the line-height of the aligned element! – Derek Henderson Jun 05 '13 at 15:00
Although not requested, surely a dynamic solution is better, if the OP does choose to change his elements height at some point in time, he doesn't have to worry about changing his overlay text it will just dynamically alter to the parent. providing a much more dynamic solution and less hassle. – RustyCollins Jun 05 '13 at 15:06
Look, I'm not saying mine is necessarily the best answer. It was simply the simplest answer given the information supplied by the OP. A dynamic solution may provide less hassle if the container's height won't remain fixed, but it is not less hassle to code than simply adding one line of CSS. A correctly done dynamic solution may certainly be better, and can be achieved using only CSS without altering the HTML, but a table-based solution is never better on so many levels. – Derek Henderson Jun 05 '13 at 15:12
Just out of interest and for future reference, how would you center the element dynamically with CSS alone? – RustyCollins Jun 05 '13 at 15:20

vertical-align: middle and position: absolute

2 Answers2

Linked