Flexbox不在页面底部居中

Question

这是我对代码笔的看法:

https://codepen.io/mch-sg/pen/zYaKdNg

flexbox以flex-start为中心，但是当我滚动到底部时，盒子开始向上，我完全不知道是什么原因造成的。我认为粘滞参数与此有关，但我看到我需要在这里寻找帮助。

/*      PRIMARY ATTRIBUTES      */
:root {
  --bgc: #A793FE;
  --dim: #939393;
  --hrc: rgb(39, 39, 39, 0.1);
  --bgswitchmode: #FFFFFF;
  --iconbg: #FFFFFF00;
  --txtcol: #000000; // #BB3333
}
body.dark-theme {
  // body.dark-theme
  --hrc: rgb(240, 240, 240, 0.1);
  --bgswitchmode: #000000;
  --txtcol: #FFFFFF;
  --hrc: rgb(200, 200, 200, 0.2);
}
body {
  height: 100%;
  transition: 0.2s;
  background-color: var(--bgswitchmode);
  color: var(--txtcol); // #FBFAF9 
  font-family: 'Inconsolata', monospace;
  margin-top: 100px;
  margin-left: 100px;
  margin-right: 8%;
  max-width: 500px;
}
p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  align-items: center;
}
.top {
  position: absolute;
  width: 100%;
  height: 70px;
  text-align: center;
  padding-top: 35px;
}
button {
  float: left;
  width: 0%;
  height: 0%;
  background-color: red; //var(--iconbg)
  color: var(--txtcol);
  font-size: 20px;
  /* border-radius: 10px; */
  border: none;
  margin-top: 15px;
  cursor: pointer;
}
.d {
  background-color: red; //var(--iconbg)
  color: var(--txtcol);
  font-size: 20px;
  /* border-radius: 10px; */
  border: none;
  /* margin-top: 15px; */
  cursor: pointer;
}
.txt {
  text-decoration: none;
  font-kerning: normal;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 30px;
}
a {
  text-decoration: none;
}
h1 {
  font-family: 'Segoe UI', sans-serif; //  'Lato', sans-serif;
  font-size: 40px;
  font-weight: 500; // 300
  letter-spacing: 1px;
}
h2 {
  font-family: 'Inconsolata', monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h3 {
  font-family: 'Inconsolata', monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0px;
  text-transform: uppercase;
  text-indent: 5%;
}
.head-title {
  font-family: 'Segoe UI', sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--hrc);
  margin: 1em 0;
  padding: 0;
}
.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  opacity: 0;
}

/*      TYPOGRAPHY      */
.text {
  font-family: 'Inconsolata', monospace;
  font-size: 17px;
  line-height: 1.5;
}
.hlink {
  /* color: rgb(175, 175, 175); */
  color: var(--bgc); //  
  text-decoration: none;
  transition: 0.2s;
  cursor: pointer;
}
.hlink:hover {
  /*color: #f5978e;  #929da6*/
  color: #939393; // 
}
a:-webkit-any-link {
  text-decoration: none;
}
.link {
  /* color: rgb(175, 175, 175); */
  font-family: 'Inconsolata', monospace;
  color: var(--bgc); //  #EE8869
  text-decoration: none;
  transition: 0.2s;
  cursor: pointer;
}
.link:hover {
  /*color: #f5978e;  #929da6*/
  color: #939393; // 
}
.navhov {
  /* color: rgb(175, 175, 175); */
  color: var(--txtcol); // #FBFAF9
  text-decoration: none;
  /* transition: 0.2s; */
  //    font-size: 19px;
}
.navhov:hover {
  /*color: #ffb086       #f5978e*/
  transition: 0.2s;
  color: var(--bgc); // 
}
.dim {
  color: var(--dim);
  text-decoration: none;
  transition: 0.2s;
}
img:hover {
  transition: 0.2s;
  color: var(--bgc); // 
}

/*     SELECTION       */
::-moz-selection {
  /* Code for Firefox */
  color: var(--bgswitchmode);
  background: var(--bgc); // #ffb086
}
 ::selection {
  color: var(--bgswitchmode);
  background: var(--bgc);
}

/*      FLEXBOX       */
.flexbox-container {
  flex: 1;
  overflow: auto;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
}
.flexbox-item {
  width: 100%; // 95%
  border: 0.1px solid rgb(39, 39, 39, 0.5);
  border-radius: 25px;
  padding: 50px;
  align-items: center;
  justify-content: center;
  /* display: flex; */
}
.flexbox-item-1 {
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 0.1px solid rgb(39, 39, 39, 0.2);
  margin: 0px 0px 0px 50px;
  /*   margin: 150px 75px 150px 150px; */
  /* 100px 0px 50px 50px */
  display: relative;
  overflow: auto;
  top: 50%;
  transform: translateY(-50%);
}
.flexbox-item-2 {
  min-height: 100px;
  border: 0.1px solid rgb(39, 39, 39, 0.2);
  margin: 100px 50px 100px 50px;
  /* 150px 150px 150px 75px */
  /* 125px 175px 0px 125px */
  display: relative;
  overflow: auto;
  /*   width: 40%; */
}
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  align-items: center;
  justify-content: center;
}
.sticky2 {
  /* top: 50%; */
  /* -ms-transform: translateY(-50%);
    transform: translateY(-50%); */
}
.sg {
  padding: 50px;
  font-size: 20px;
}
.ss {
  position: fixed;
}
body {
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html {
  overflow-x: hidden;
}
.cent {
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
  text-decoration: none;
  margin-left: 40%;
  /* 43% */
  font-size: 17px;
}
.mb {
  margin-bottom: -10px;
}
.mbl {
  margin-bottom: 150px;
}
ul.nav {
  padding-left: 0px;
  text-align: center;
}
ul.nav>li {
  display: inline-block;
  padding: 0px 50px;
}
ul.nav>li:hover {
  background-color: #00000000;
}
ul.nav>li>a {
  text-decoration: none;
}
.subhead {
  font-size: 22px;
  font-weight: 400;
}
.sublink {
  font-size: 20px;
  font-family: 'Inconsolata', monospace;
  font-weight: 500;
}

<div class="flexbox-container">
  <div class="flexbox-item flexbox-item-1 sticky sg">
    <div class="cent"><a class="navhov" href="/norsa/">Home</a><br></div>
    <div class="cent">
      <a class="navhov" href="#section1"><br><br>1.0. Getting started</a><br></div>
    <div class="cent ">
      <a class="navhov" href="#section2"><br><br>2.0. Introduction</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3"><br><br>3.0. Business Strategy</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3-1"><br>⠀⠀⠀⠀3.1. Executive Summary</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3-2"><br>⠀⠀⠀⠀3.2. Products & Services</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3-3"><br>⠀⠀⠀⠀3.3. Market Analysis</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3-4"><br>⠀⠀⠀⠀3.4. Marketing & Sales</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3-5"><br>⠀⠀⠀⠀3.5. Company Organization</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section3-6"><br>⠀⠀⠀⠀3.6. Financial Projections</a><br></div>
    <div class="cent mb">
      <a class="navhov" href="#section4"><br><br>4.0. Financial</a><br></div>
    <div class="cent">
      <a class="navhov dim" href="/norsa/helpme/"><br><br><br><br>Help me</a>
    </div>
    <div class="cent">
      <a class="navhov dim" href="#sectionA"><br>About<br></a><br></div>
    <div class="cent pleek"><img class="bi bi-moon d dim pleek" src="" height="0" width="0" onclick="dark()" />
      <a href="https://github.com/mch-sg" target="_blank" style="display:contents;"><img class="bi bi-bookmark-heart-fill d dim" src="" style="margin-left: 35px;" height="0" width="0" /></a>
    </div>
  </div>
  <div class="flexbox-item flexbox-item-2 text">
    <div id="section1" class="txt">
      <h1>Help me</h1>
      <h1 class="mb dim subhead">We are a simple website for businesses, providing a wide variety of company templates, from employee agreements to style guides and strategies.</h1><br>
      <br> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
      sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
      Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
      <br><br> Fusce luctus vestibulum augue ut aliquet. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
      vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
      <br><br><br>
      <hr/>
      <br>
    </div>
    <div id="section2" class="txt">
      <h2 class="mb"> 2.0.⠀⠀Introduction</h2> <br>
      <a class="head-title">Whatever you do, don't quit.</a>
      <br><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
      massa. Fusce luctus vestibulum augue ut aliquet.
      <br><br>
      <a class="link" href="/assets/" target="_blank">🡢 Business strategy</a><br>
      <a class="link" href="/assets/" target="_blank">🡢 Download 'The Brand Guide'</a>
      <br><br> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
      Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
      porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
      <br><br><br>
      <hr/>
      <br>
    </div>
  </div>

我试着乱搞边距和居中，以及粘性参数，它没有工作。

我为凌乱的文件道歉:)

Answer 1

flex项目不应该有justify-content和align-items，尽管它们被忽略了。关于你的问题，从元素位置移除sticky。这应该能解决问题。