flexbox中的中心垂直对齐

Question

我有一个如下图所示的 flexbox 布局：

html {
  height:100%;
  width:100%;
}
body {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  width:100%;
  margin:0;
  background-color:grey;
}
header {
  background-color:green;
  height:3em;
  flex:0 0 auto;
}
main {
  display:flex;
  flex:1 1 auto;
  overflow:hidden;
  background-color:yellow;
}
nav {
  flex:0 0 100px;
  overflow:auto;
  background-color:grey;
}
#wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color:red;
}
#content {
      flex: 1 1 auto;
    overflow:auto;
    background-color:white;
}
footer {
      height: 1em;
    flex: 0 0 auto;
    background-color:blue;
}

<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
     0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
    </div>
    <footer></footer>
  </div>
</main>

滚动按预期工作，我看到从 0 到 29。

但是如果我有一个 29 行，我怎样才能使这一行在内容中居中对齐？

我尝试在content 上设置display:flex 和align-items:center，这适用于单行，但在内容长的情况下会使内容的顶部消失。

一行的期望结果：

Answer 1

由于<br>,，您无法对齐项目。你可以尝试使用span 向水平方向

html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: grey;
}

header {
  background-color: green;
  height: 3em;
  flex: 0 0 auto;
}

main {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: yellow;
}

nav {
  flex: 0 0 100px;
  overflow: auto;
  background-color: grey;
}

#wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#content {
  align-items: center;
  flex: 1 1 auto;
  overflow: auto;
  background-color: white;
  display: flex;
}

span {
  padding: 5px;
}

footer {
  height: 1em;
  flex: 0 0 auto;
  background-color: blue;
}

<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span>16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
    </div>
    <footer></footer>
  </div>
</main>

对于垂直尝试这个希望这会对你有所帮助。

html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: grey;
}

header {
  background-color: green;
  height: 3em;
  flex: 0 0 auto;
}

main {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: yellow;
}

nav {
  flex: 0 0 100px;
  overflow: auto;
  background-color: grey;
}

#wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#content {
  flex: 1 1 auto;
  overflow: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
}

span {
  padding: 5px;
}

footer {
  height: 1em;
  flex: 0 0 auto;
  background-color: blue;
}

<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span>16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
    </div>
    <footer></footer>
  </div>
</main>

如果您想垂直居中对齐，请添加此align-items: center;

Answer 2

参考您的图片。我想这就是你要找的。 <br> 不适合您，因为您需要为每个元素提供 height，因此我已将其替换为 div，其中可能包含一些 forms 或任何其他数据。

	html {
  height:100%;
  width:100%;
}
body {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  width:100%;
  margin:0;
  background-color:grey;
}
header {
  background-color:green;
  height:3em;
  flex:0 0 auto;
}
main {
  display:flex;
  flex:1 1 auto;
  overflow:hidden;
  background-color:yellow;
}
nav {
  flex:0 0 100px;
  overflow:auto;
  background-color:grey;
}
#wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color:red;
}
#content {
      flex: 1 1 auto;
    overflow:auto;
    background-color:white;
}
#content > div{ border:1px solid #ccc; height:100vh; display:flex; align-items: center;  }
footer {
      height: 1em;
    flex: 0 0 auto;
    background-color:blue;
}

<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
     <div>0</div>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
     <div>7</div>
     <div>8</div>
     <div>9</div>
     <div>10</div>
     <div>11</div>
    </div>
    <footer></footer>
  </div>
</main>