Vertical center element 100% okna

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            padding: 0px;
            margin: 0px
        }
        
        .vertical {
            display: table;
            height: 100vh;
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
        
        .table-cell {
            display: table-cell;
            vertical-align: middle;
            margin: auto;
            width: 100%
        }
        
        .sectionclass1 {
            background: url('https://images81.fotosik.pl/340/42b35b22f5e2a029.jpg') center center no-repeat fixed;
            background-size: cover;
            position: relative;
            width: 100%!important;
            height: 100vh!important;
        }
        
        .arrow {
            position: absolute;
            left: 0;
            bottom: 0;
            text-align: center;
            margin: auto;
            width: 100%;
            z-index: 3000
        }
    </style>
</head>

<body>
    <section class="sectionclass1 overflow-none vertical">
        <div class="container-fluid height-100 table-cell text-left white-font" id="welcome">
            <h3 class="wow zoomIn" data-wow-delay="0.5s"><span class="border-bt big-font">FITNESS CENTER&</span></h3>
            <h3 class="wow zoomIn" data-wow-delay="0.5s"><span class="border-bt big-font">PROFESSIONAL GYM STUDIO</span></h3>
        </div>
        <div class="arrow">
            <a href="#about" class="chewron-down smoothScroll"> <i class="fa fa-angle-down fa-5x  div-a" aria-hidden="true"></i></a>
        </div>
    </section>
</body>

</html>
Komentarze wyłączone