Vertical center working except for IE7 (table-cell) [duplicate]

StackOverflow https://stackoverflow.com/questions/20448365

Pergunta

Currently I got an overlay that is vertically centering everything inside of it. It works fine in modern browsers and all version of Internet Explorer down to IE8.

In IE7 this does not seem to be working. But after some research I found out that IE7 does not support display: table-cell;. So that is what's causing the issue.

However, I have no idea how I would fix this so that it also works in Internet Explorer 7.

Can anybody help me out on this?

CSS

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

div#overlay {
    z-index: 1000;
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bd000000,endColorstr=#bd000000);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div#overlay div#verticalCenter {
    display: table-cell;
    vertical-align: middle;
    padding: 15px;
}

HTML (simplified)

<body class="noscroll">
    <div id="overlay">
        <div id="verticalCenter">
            Test 1 2 3 4 5 6 7 8 9 10
        </div>
    </div>
</body>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top