css - 为什么对齐元素不起作用？

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有关 View 高度 (vh) 和 View 宽度 (vw) 的更多信息，并了解浏览器支持。