如何在保持页脚的同时将flex容器定位为垂直和水平对齐？

Question

我试图在一个flex容器中垂直和水平居中一个句子，同时在屏幕上保留一个页脚。我如何才能做到这一点呢？

  <div class="d-flex flex-column h-100 p-3 bg-primary">
    <div class="p-3 bg-info flex-grow-1">
      <div class="d-flex justify-content-center">
        <div class="bg-danger p-3">center me - horizontally and vertically</div>
      </div>
    </div>

    <div class="p-3 bg-danger">
      footer
    </div>
  </div>

请参阅此处的示例：https://codepen.io/anon/pen/NLjvKY

Answer 1

尝试将此样式添加到bg-info类

​

.bg-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

​

(您也可以将flex-direction更改为column，它是双向的，因为只有一个元素)