Vertical centred fullscreen div with scroll bar

Question

I would like to make fullscreen, vertical centred div overlaying all content below.

/* css */
#box {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* It is <body> tag class */
.overlay-hidden {
    overflow: hidden;
}

<!-- html -->
<body class="overlay-hidden">
    <div id="box">
        <!-- #box popup content goes here -->
    </div>
    <div class="container">
        <!-- content goes here -->
    </div>
</body>

Here is my code: https://jsfiddle.net/uzy78s69/ It seems work great but when I add more content to #box it does not work well https://jsfiddle.net/uzy78s69/1/

Click X or Create new post to check behaviour.

What I do wrong? How can I fix it?

have check `align-items: center;` this part... when i unchecked it it works....I think you want like this??? — Yonas Hailu, Dec 25 '16 at 16:30
**vertical centered full-screen** what you meant? what is the purpose to center a full width content? — ADH - THE TECHIE GUY, Dec 25 '16 at 16:31
@dreamhunter By fullscreen I have meant to overflow all browser area `width: 100%; height: 100%`. `div` should be also vertically and horizontally centred. — Jarmark, Dec 26 '16 at 14:37

score 1 · Accepted Answer · answered Dec 25 '16 at 16:44

1

Just add

#box > .container {
  max-height: 100%;
}

JSfiddle: jsfiddle.net/uzy78s69/3

answered Dec 25 '16 at 16:44

pol

2,641
10
16

score 0 · Answer 2 · answered Dec 25 '16 at 16:29

0

Just remove display:flex; from #box class.

Example

answered Dec 25 '16 at 16:29

Anil Talla

709
5
19

Vertical centred fullscreen div with scroll bar

2 Answers2