html,body { height: 100%; } .dialog { position: fixed; top: 50%; left: 50%; margin-left: 0px; margin-top: 0px; width: 0px; height: 0px; overflow: hidden; border: 1px solid #999; text-align: center; border-radius: 25px; box-shadow: 5px 5px 5px #999; background: #88f; transition: all 0.3s; } .dialog .close { position: absolute; bottom: 10px; left: 50%; margin-left: -25px; width: 50px; height: 20px; border: 1px solid #999; background: #339; color: #fff; text-align: center; } #dialogswitch { display: none; } #dialogswitch:checked+.dialog { margin-left: -150px; margin-top: -100px; width: 300px; height: 200px; }