格垂直和水平[重复]内的HTML内容对准

Question

这个问题已经在这里有一个答案：

• How to vertically align an image inside a div 35个回答
• How to Vertical align elements in a div? 28个回答
• Flexbox: center horizontally and vertically 10个回答
• Vertically centering a div inside another div [duplicate] 24个回答
• How to center absolutely positioned element in div? 32个回答

我想与高度50vh和全角一个div。里面我需要一个<ul>元件，taht在div的左半垂直和水平方向为中心，即在div的右半垂直和水平中心的<image>。我试过这么多东西，不能得到它的权利。谁能帮我？

<div style="height:50vh; width:100vw;"> 

    <div style="display:inline-block; height:50vh; width:49vw; vertical-align: middle">
        <ul>
            <!--...-->
        </ul>
    </div>
    <div style="display:inline-block; height:50vh;width:50vw; vertical-align: middle">
        <img src="img/Kundenstrategie/Logos.png" style="width: 40vw;"/>
    </div>
</div>

Answer 1

display flex;
flex-direction: column;

会让你的两个内部的div包括其内容垂直。

justify-content: center; 

将您的内容（UL / IMG）中心（垂直），和

margin: 0 auto;

会让他们水平排列

.container{
  display:flex;
  flex-direction: row;
}

.left, .right{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul, img{
margin: 0 auto;
}

<div class="container">
  <div class="left">
    <ul>
      <li>aaaa</li>
      <li>bbbb</li>
      <li>cccc</li>
    </ul>
  </div>
  <div class="right">
    <img src="https://via.placeholder.com/200"/>
  </div>
</div>

Answer 2

您可以使用柔性框中，选中下面的例子

.main {
display:flex;
width: 100%;
height: 50vh;
background: black;
flex-basis: 0;
align-content: center;



}

.child {
width: 50%;
height: 100%;
margin:auto;
padding:0;
text-align:center;
justify-content:center;


}


ul {
background: blue;
display:flex;
flex-direction:column;

}

<div class="main">
<ul class="child">
<li>List</li>
<li>List</li>
</ul>
<img  class='child'  src='https://via.placeholder.com/300.png/'>
</div>