如何从顶部显示居中的 div？ [复制]答案

【问题标题】：How to display centered div from top? [duplicate]如何从顶部显示居中的 div？ [复制]
【发布时间】：2016-09-24 22:53:08
【问题描述】：

我有这个代码：

<div id="background">
  <div id="box">
    <ol>
    <li>asdf asdf asdf</li>
    ...
    </ol>
  </div>
</div>

CSS：

html, body {
  height: 100%;
  margin: 0px;
}
#background {
  display: flex;
  align-items: center;
  height: 100%;
}
#box {
  background-color: yellow;
  margin: 0 auto;
  width: 200px;
}

https://jsfiddle.net/tfuu63et/

如果列表很短，它可以正常工作。但如果这很长，我看不到列表顶部的某些项目。

我该如何修复它？

【问题讨论】：

你试过align-items: flex-start吗？
完整解释：stackoverflow.com/q/33454533/3597276

标签： html css flexbox

【解决方案1】：

只需省略 align-items，您不需要它来获得所需的外观：

#background {
  display: flex;
  // align-items: center;
  height: 100%;
}

【讨论】：

【解决方案2】：

你试过align-items: flex-start吗？这似乎得到了你想要的结果。

除非您要更广泛地使用flex，否则您也可以只删除display: flex; 和align-items，列表仍将位于页面中心并从第一个列表项开始。

旧答案

~~选项 1~~

#background {
  display: flex;
  align-items: flext-start;
  height: 100%;
}

~~选项 2~~

#background {
  height: 100%;
}

更新答案

您可以使用 CSS 表格。

html, body {
  height: 100%;
  margin: 0px;
}
#background {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 200px;
}
#box {
  display: table-cell;
  vertical-align: top;
  background-color: yellow;
}

<div id="background">
    <ol id="box">
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
    </ol>
</div>

演示JSFiddle.

【讨论】：

是的，但是如果列表很短，我想把它放在中间。
啊，好吧。我在这个问题上不是很清楚。我会看看我能做什么。它只是页面上的这个列表吗？您是否正在寻找垂直和水平居中？

【解决方案3】：

您也可以在 box 类上使用margin-top:50%，您可以根据需要更改值

【讨论】：