CODEWITHSUNDEEP
cssfirefox
REELHERO
REELHERO

Reputation: 37

vertically centering not working in firefox

I'm using parent containers to vertically center a div.

http://danacoleproducer.com

It works in Safari and Chrome but not Firefox. I looked at this post: CSS vertical-align: middle not working but I'd rather not use tables.

My CSS:

.wrapper {
    height: 100%;
    max-width: 420px;
}
.wrapper:before,
.container {
    display: inline-block;
    vertical-align: middle;
}
.wrapper:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    margin-left: -0.25em;
}
.container {
    text-align: justify;
    font-size: 12px;
}

Upvotes: 0

Views: 1073

Answers (1)

Chris
Chris

Reputation: 51

The following might do the trick ;-) 

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

Where .container is what you want to center vertically.

Upvotes: 1

Related Questions