0

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;
}
Community
  • 1
  • 1
REELHERO
  • 37
  • 1
  • 9

1 Answers1

1

The following might do the trick ;-) 

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

Where .container is what you want to center vertically.

Chris
  • 51
  • 3
  • it does but then not in safari http://danacoleproducer.com/index_test1.html and strangely the animate in doesn't work in safari - – REELHERO Nov 04 '14 at 01:58
  • I don't know about the animation in safari, sorry. First try to clean the code from errors to check if it works. – Chris Nov 04 '14 at 02:07
  • You might want to use conditional comments as the code before worked for safari but not on firefox and vice versa now. Bad thing about it, you can't use them inside an external css-file. – Chris Nov 04 '14 at 02:12
  • thanks chris - I'm sorry I'm not a frequent poster - by conditional comments how does that format? - also what errors did you catch. – REELHERO Nov 04 '14 at 16:04