为什么对齐项目不起作用？

Question

HTML

.listbox
  .hours
    ul Hours
      li Monday
      li Tuesday
      li Wednesday
      li Thursday
      li Friday
      li Saturday
      li Sunday

CSS

body
  margin: 0
  padding: 0
  display: flex
  align-items: center
  justify-content: center

这应该会导致 .listbox div 垂直居中和水平居中，但事实并非如此。这是笔：http://codepen.io/joshbivens/pen/ByvQwO

Answer 1

您必须指定主体的高度，否则水平居中不会考虑您看到的整个区域。

对于 codepen 和响应式设计，使用 height: 100vh 就可以了。试试这个：

body
  margin: 0
  padding: 0
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  ul
    list-style: none

http://codepen.io/himmel/pen/xbmRYR

Here 了解有关视图高度 (vh) 和视图宽度 (vw) 的更多信息，并了解浏览器支持。

为什么对齐项目不起作用？

Why wont align-items work?

css

flexbox