Vertical center fixed element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .window-container {
            background-color: rgba(0, 0, 0, .8);
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            -webkit-padding-start: 0px;
            margin: auto;
            text-align: center;
            height: 100vh;
            z-index: 8000;
        }
        
        .window-col {
            background-color: rgba(23, 124, 164, 0.9);
            text-align: center;
            padding: 15% 15px 15% 15px;
            border-radius: 5px;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
            margin: auto;
            width: 70%;
            -webkit-padding-start: 0px;
            padding-left: 0px;
        }
        
        .window-close {
            position: absolute;
            top: 0;
            right: 22px;
            font-size: 70px;
            cursor: pointer;
        }
        
        .contact-img {
            width: 110px;
            height: 110px;
            margin: auto;
        }
        
        .content {
            width: 40px
        }
    </style>
</head>

<body>
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maiores autem, vel voluptas! Quaerat enim minima, delectus. Impedit dolorem atque nobis iusto quas excepturi est facilis eos voluptas eaque veniam, repellat, totam, beatae. Explicabo aut perferendis architecto optio officia alias distinctio recusandae quis autem, debitis est id cum earum harum, voluptatibus odit, reiciendis minus unde similique at dolorem. Error possimus delectus nesciunt illum molestiae eligendi incidunt, quaerat enim alias officiis ipsum sint debitis accusamus! Assumenda repudiandae accusamus est excepturi adipisci ex aspernatur omnis labore minima. Architecto rerum natus id nisi provident ipsum beatae molestiae eaque sapiente, facilis numquam expedita quidem perferendis tempora harum dolor doloremque dicta culpa adipisci quisquam.
        </p>
    </div>
    <div id="window-1" class="window-container">
        <div class="window-col">
            <span class="window-close">&times;</span>
            <img src="http://drive.google.com/uc?export=download&id=0Bw176tQtKlp1WUd5ZGJTNmVOZUU" class="contact-img">
            <h2 class="big-font aldrich" style="margin-top:0px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis saepe necessitatibus, autem esse aperiam sed </h2>
        </div>
    </div>
</body>

</html>
Komentarze wyłączone