A Pen by Joby Elliott.

CSS-centered-modal.markdown

CSS-centered modal

Pure-CSS centering of a box, both horizontally and vertically. No javascript required, works with any markup.

A Pen by Joby Elliott on CodePen.

License.

index.html

<div class="container">
    <div class="centered">
        Centered box, you can put whatever content
        you want in here, and it stays centered!
        No JS required, and super-clean markup.
    </div>
</div>

script.js

/*
THERE IS NO JS!
*/

style.css

.container {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    text-align:center;
}
.centered {
    padding:5px;
    background:#eee;
    border-radius:5px;
    display:inline-block;
    vertical-align:middle;
    max-width:400px;
    margin:10px;
}
.container:before {
    content:"";
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
}