Как расположить гибкий контейнер так, чтобы он был выровнен по вертикали и горизонтали при сохранении нижнего колонтитула?

Question

Я пытаюсь центрировать предложение по вертикали и горизонтали в одном гибком контейнере, сохраняя при этом нижний колонтитул на экране. Как мне это сделать?

  <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 class

.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>