如何减少div容器以将内容放在中心？

Question

容器中有两列，左边是png照片，右边是ul元素。 它们都设置在div容器的中心。

nth-parent

div.whole{
 width:620px;
 overflow:auto;
 border:2px solid red;}

div.left,div.right{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
float:left;
width:300px;
height:200px;
}

div.box_left{    
width:120px;
height:120px;
}

div.box_right{
overflow:auto;
float:left;
}

li{ 
list-style:none;
display: inline-block;
vertical-align: middle;
padding 0 0 0 0;
display:inline-block;   
border-bottom: 1px dashed black;
width:100px;}

这里有五个div容器：div.whole，div.left，div.box_left，div.right，div.box_right。
对于简单的工作，5个容器来说，这有点麻烦 我可以减少其中两个以获得相同的效果吗？

Answer 1

使用文本对齐中心进行水平对齐，即css text-align:center和

line-height:'some pixel' for vertical center 

Answer 2

这样的事情：

div.whole {
 width:620px;
 display:table;
 border:2px solid red;
}

div.left, div.right {
  text-align:center;
  display: table-cell;
  width:300px;
  height:200px;
  vertical-align:middle;
}

ul{ padding:0; }

li {
  text-align:left;
  list-style:none;
  display: inline-block;
  vertical-align: middle;
  padding 0 0 0 0;
  display:inline-block;   
  border-bottom: 1px dashed black;
  width:100px;
}

和html：

<div class="whole">
  <div class="left">
    <img src="images/pic.png" width="120" height="120"/>
  </div>
  <div class="right">       
    <ul>
      <li>x1</li><li>y1</li> 
    </ul>
    <ul>
      <li>x2</li><li>y2</li> 
    </ul>
    <ul>
      <li>x3</li><li>y3</li> 
    </ul><ul>
      <li>x4</li><li>y4</li> 
    </ul>
  </div>
</div>

示例：https://jsbin.com/saqecaseji/edit?html,css,output