vertically center content that exceeds window height

Question

I'm trying to vertically center a box by using display: flex;, while it's working when the box is small enough, but when the box exceeds the window height, part of the content will be cut off.

Working example: http://codepen.io/woutr_be/pen/bVQXLe

Example with large height: http://codepen.io/woutr_be/pen/KdrOZm

It seems to be related to the body: { height: 100%; }, but when I remove that, the box isn't centered anymore: http://codepen.io/woutr_be/pen/MazNrE

I can't figure out how to make it work when the box has a large height.

can is suggest another approach that works not matter the height? — Gacci, Nov 12 '15 at 04:00
@Quoid Vertically aligning the element is working, when the content is to large for the screen, it will get cut of with my solution. — woutr_be, Nov 12 '15 at 04:20
That's correct. I think it's because I'm setting the height of the body to a 100% — woutr_be, Nov 12 '15 at 04:24
I understand, here is how [I center vertically](http://stackoverflow.com/questions/33404950/vertically-align-div-to-middle-of-element/33405293#33405293) - I don't like using `position: absolute` like mentioned below because it takes the element out of the document flow (parent won't expand, if that's necessary, you had a `modal-parent` so I assumed it was) - if the `modal` is bigger (in `height`) then the parent, then you don't need to `center` vertically :) - [see here](http://jsfiddle.net/cLmvb0m2/) — justinw, Nov 12 '15 at 04:36
Problem is that I would need to check if my modal is bigger than the parent through javascript in that case. — woutr_be, Nov 12 '15 at 04:54
Possible duplicate of [Can't scroll to top of flex item that is overflowing container](http://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) — Michael Benjamin, Nov 12 '15 at 12:49

score 0 · Accepted Answer · answered Nov 12 '15 at 04:07

0

This is generally what I tend to use when I need to align an element vertically. Try changing the height and width and you will notice how it automatically calculates to center the element.

div.container{
    width: 300px;
    height: 300px;
    position: relative;
  
    background: salmon;
}

div.container > div.wrapper{
    position: absolute;
  
    top: 50%;
    left: 50%;
  
  
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  
    background: red;
}

<div class='container'>
    <div class='wrapper'>
      <label>Some text</label>
      <label>Some more text</label>
    </div>
</div>

answered Nov 12 '15 at 04:07

Gacci

1,388
1
11
23

Ah yes, I actually had that solution at first. The reason why I didn't go with it was because I was using an animation to display the popup. Which is also using the transform property. (https://github.com/daneden/animate.css/blob/master/source/zooming_entrances/zoomIn.css) – woutr_be Nov 12 '15 at 04:14
You can still use it with transform ... transform: scale3d(.3, .3, .3) translate(x, y), any other transform – Gacci Nov 14 '15 at 21:18

score -1 · Answer 2 · answered Nov 12 '15 at 04:04

-1

You could simply add max-height: 90% to .modal-box. The 90% is a bit arbitrary, but will give you some padding around the modal.

answered Nov 12 '15 at 04:04

Bryan Downing

15,194
3
39
60

I do want to display the full content on my page tho, and prefer not to use `overflow` – woutr_be Nov 12 '15 at 04:11

vertically center content that exceeds window height

2 Answers2

Linked