中心內容在全屏幕光滑滑塊

Question

我想在全屏滑頭滑（kenwheeler.github.io/slick/）到中心內容，

我已經嘗試使用柔性框，但內容保持在視口的邊緣，這似乎是漂亮的 css的position標籤的問題，但我無法弄清楚我做錯了什麼。

這是我第一次使用flex，所以也許我失去了一些東西？

Website live here

HTML

<div class="wrapper"> 
<div class="main"> 
    <img class="logo" src="img/logo.png"> 
    <h1><a href="#">XXXXXX</a></h1> 
    <h2>XXXX is a collaboration between <a href="#">XXXX</a> & <a href="#">XXXX</a></h2> 
</div> 
<div class="background"> 
    <div class="slide" style="background: url('bg/hlg1.jpg') no-repeat center center"></div> 
    <div class="slide" style="background: url('bg/hlg2.jpg') no-repeat center center"></div> 
    <div class="slide" style="background: url('bg/hlg3.jpg') no-repeat center center"></div> 
    <div class="slide" style="background: url('bg/hlg4.jpg') no-repeat center center"></div> 
</div> 

CSS

*{ 
    min-height: 0; 
    min-width: 0; 
    cursor: crosshair; 
} 

html{ 
    height: 100%; 
    min-height: 100%; 
} 

body{ 
    font-family: sans-serif, "Helvetica", "Arial"; 
    font-weight: bold; 
    font-size: 62.5%; 
    color: #fff; 
    text-align: center; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    background: #000; 
    min-height: 100%; 
    overflow: hidden; 
} 

.wrapper { 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.slide { 
    height: 100%; 
    width: 100%; 
    background-size: cover !important; 
} 

.background { 
    height: 100%; 
    width: 100%; 
    z-index: 0; 
} 

.slick-list, 
.slick-track { 
    height: 100%; 
} 

.slick-prev { 
    position: fixed; 
    left: 2vw; 
    height: 4vh; 
    width: 3vw; 
    z-index: 2; 
} 

.slick-next { 
    position: fixed; 
    right: 2vw; 
    height: 4vh; 
    width: 3vw; 
    z-index: 2; 
} 

.slick-slider { 
    margin-bottom: 0; 
} 

.arrow:hover { 
    cursor: crosshair; 
} 

.main { 
    flex: none; 
    top: 3vh; 
    z-index: 1; 
    max-width: 50%; 
    position: absolute; 
} 

.logo { 
    width: 25vw; 
    margin: auto; 
} 

Answer 1

由於該元素（主要）保持那裏所有的添e，您可以使用這些設置：

.main { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    z-index: 1; 
}