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）的更多信息，并了解浏览器支持。

为什么不对齐项目工作？

1 个答案: