flex垂直居中,水平居中和其他布局方式

<div class="content"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> .content { 
   
   display: flex;
   align-items:center;
   justify-content:center;
   border: 1px solid #0000FF;
   height: 100px;
   width: 500px; // 下面的代码可以让不同宽高的图片在固定宽高的容器里面正常比例显示, 并且水平, 垂直居中 > img { 
   
   		max-width: 100%;
   		max-height: 100%;
   }
 }
 .item { 
   
   width: 60px;
   height: 40px;
   border: 1px solid red;
 }