垂直中心A會計固定欄頂部

Question

我有一個需要垂直居中的標誌。我可以使用flexbox方法將其居中放在父級上使用display flex，而在子級上使用margin auto。

但是，我有一個固定的頂部酒吧高度150px與父容器重疊。所以標誌現在與垂直居中相距150px。

解決這個問題的最好方法是在圖像上添加padding-top？

h1, p{ 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .header { 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    display: flex; 
 
    margin: auto; 
 
    background: green; 
 
    } 
 
    .top-bar { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    height: 150px; 
 
    width: 100%; 
 
    background: tomato; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    } 
 
    .logo { 
 
    margin: auto; 
 
    } 
 
    .section{ 
 
    height: 1500px; 
 
    background: pink; 
 
    }

<div class="header"> 
 
     <div class="top-bar"> 
 
     <h1>Top Bar</h1> 
 
     </div> 
 
     <img class="logo" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 

 
    <div class="section"> 
 
     <p>Section</p> 
 
    </div>

代碼：https://codepen.io/drunktuts/full/oemRxp/

Answer 1

您可以將padding-top添加到header，這將使top-bar的底部和視口底部之間居中logo。

此外，您還需要將其高度更改爲min-height: calc(100vh - 150px);，或者添加box-sizing: border-box（用於codepen），以便將填充值包含在設置高度中。

Updated codepen

棧片斷

html, body { 
 
    margin: 0; 
 
} 
 
h1, p{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    width: 100%; 
 
    min-height: calc(100vh - 150px); 
 
    display: flex; 
 
    margin: auto; 
 
    background: green; 
 
    padding-top: 150px; 
 
} 
 
.top-bar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 150px; 
 
    width: 100%; 
 
    background: tomato; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.logo { 
 
    margin: auto; 
 
} 
 
.section{ 
 
    height: 1500px; 
 
    background: pink; 
 
}

<div class="header"> 
 
    <div class="top-bar"> 
 
    <h1>Top Bar</h1> 
 
    </div> 
 
    <img class="logo" src="http://via.placeholder.com/350x150"> 
 
</div> 
 
<div class="section"> 
 
    <p>Section</p> 
 
</div>