Menu icon Foundation
Vertical Center Reveal Dialog

I'm embarrassed to say how long I have spent trying to figure this out.

Is it possible to vertically center a reveal dialog box (that is not a set height) in the browser window?

I thought I could use... 

top: 50%;
transform: translateY(-50%);

but Foundation overrides it with an element style for top.

Any explanations or solutions would be greatly appreciated.

 

revealmodaldialogvertical center

I'm embarrassed to say how long I have spent trying to figure this out.

Is it possible to vertically center a reveal dialog box (that is not a set height) in the browser window?

I thought I could use... 

top: 50%;
transform: translateY(-50%);

but Foundation overrides it with an element style for top.

Any explanations or solutions would be greatly appreciated.

 

Rafi Benkual over 3 years ago

The reveal offset is set in the JS because it's based on window height and scroll position. You can control it with the data-v-offset option

<div class="reveal" id="exampleModal2" data-reveal data-v-offset="600">

TR Douglas over 3 years ago

Thanks Rafi, I did see that option, but isn't it just setting the dialog box at a fixed pixel distance from the top?

Or perhaps I am missing something... is there a way that setting would vertically center the dialog box?

The designer wants the box dead center of the screen and to be that way at different screen sizes.

Rafi Benkual over 3 years ago

Ahh,

You'd be changing the position to absolute

TR Douglas over 3 years ago

Yes, that's it... and I got tripped up because Foundation kept overriding my vertical centering with an element style for top.

Then I realized that I was being stupid and forgot to add !important to the top property in my css file.

Good to go now, thanks much Rafi!