有没有办法使单个 <div> 内容垂直居中而不影响 <div> 兄弟的内容？

Question

Image showing the expected alignment on the last div 我有多个 div 环绕在显示设置为 flex 的父级周围。 我希望垂直对齐（如在vertical-align:middle中）并且还水平对齐（如在text-align:center中）将仅放入最后一个 div 的任何内容，，例如隐私政策、使用条款、社交媒体按钮等，而不会影响当前按预期显示的其他兄弟。

我尝试将父级设置为显示为 flex，并将 justify-content 和 align-items 设置为居中，但它影响了所有子级 - 不仅仅是 LAST DIV（这不是我想要的）。

使用垂直对齐：中间；好像也没用。

这是样式表：

#footer-container{
        width:100%; min-height: 200px;
        background: lightblue; border:2px solid blue;
        }
        #div-wrap{
            display: flex; flex-flow: row wrap; justify-content: space-between;

            font-size:1rem;
            width:95%;
            margin: 0 auto;
            }
            #div-wrap div{
                border:2px solid red;
                min-width:200px; height: 200px;
                margin:4px auto; padding: 0 3px;
                display: inline-block; 
                font-size: 1.3rem;
                }
                h5{
                    font-size:1.125rem;
                    padding:5px;margin:0px;
                    }

 /*  The code below can be modified for the question...  */
            .terms{
                width: 300px; background-color: yellow;
                color:green; font-weight: bolder; text-align: center;
                vertical-align: middle; /* Does;nt work, dont know why */
                margin-left: auto; margin-right: 6px;
                }

<section id="footer-container">
             <div id="div-wrap" >

                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>
                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>
                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>
                <div>
                    <h5>Quick Link Title</h5>
                    <ul> </ul>
                </div>

                <div class="terms" >

                    <p><small>Copywrite &copy;2019. All right reserved</small></p>

                </div>

            </div>
        </section>

Answer 1

你的意思是这样的吗？

#footer-container {
  width: 100%;
  min-height: 200px;
  background: lightblue;
  border: 2px solid blue;
}

#div-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  font-size: 1rem;
  width: 95%;
  margin: 0 auto;
}

#div-wrap > div {
  border: 2px solid red;
  min-width: 200px;
  height: 200px;
  margin: 4px auto;
  padding: 0 3px;
  display: inline-block;
  font-size: 1.3rem;
}

h5 {
  font-size: 1.125rem;
  padding: 5px;
  margin: 0px;
}

#div-wrap div.terms {
  width: 300px;
  background-color: yellow;
  height: 200px;
  color: green;
  font-weight: bolder;
  text-align: center;
  margin: 4px auto;
  padding: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer div {
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}

.icon {
margin: 3px;
}

<section id="footer-container">
  <div id="div-wrap">

    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>
    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>
    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>
    <div>
      <h5>Quick Link Title</h5>
      <ul> </ul>
    </div>

    <div class="terms footer">
     <div><span class='icon'>fb</span><span class='icon'>twitter</span><span class='icon'>other</span></div>
     <div><p><small>Copywrite &copy;2019. All right reserved</small></p></div>
     <div>Other info </div>
    </div>

  </div>
</section>