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，因为其中只有一个元素，所以这两种方法都起作用）

Answer 2

我认为这对您有帮助

html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}

<div class="flex-container">
<div class="row"> 
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

如何在保持页脚的同时将伸缩容器垂直和水平对齐？

2 个答案: