CSS responsive margin top

Question

I want to position a <div class="container"></div> in the middle of the screen in such a way so that it's responsive to any screen size. The red marked area on the screenshot should always appear in the middle of the screen.

How to position it? Currently I'm using margin-top:85px when I squeeze the browser, the distance between the red marked area and the navbar should decrease as well.

Answer 1

Have you tried absolute centering? You would need to add a position relative to the parent container... You would also need to declare a height on the container element...

.parent-container {
    position: relative;
}

.container {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

I hope this helps...