垂直中心A Div会计用于固定栏顶部

Question

我有一个需要垂直居中的徽标。我能够使用flexbox方法将其居中，使用父级的显示flex和孩子的自动边距。

但是，我有一个固定的顶部栏，高度为150px，与父容器重叠。因此，徽标现在距离垂直居中150px。

除了在图像上添加填充顶部之外，解决此问题的最佳方法是什么？

    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，这会使logo位于top-bar底部和视口底部之间。

此外，您还需要将其高度更改为min-height: calc(100vh - 150px);，或添加box-sizing: border-box（在codepen中使用），以便填充包含在设置的高度中。

Updated codepen

Stack snippet

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;