div内でimgを縦横に整列する方法は？

Question

これは何度も尋ねられてきたことは知っていますが、私はこれまでに読んだことはほとんど試しました。

divの内側にimgを水平方向と垂直方向に整列させたいと思います。

コンテナdivは、プレビューをクリックすると画像を示すモーダルの内側にあります。次に、任意のサイズの写真が含まれます。

私は水平または垂直に整列できますが、両方に整列することはできません。

HTMLコード：https://pastebin.com/7dCQ1aJg

<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content"> 
<div class="row content"> 
    <div class="col-lg-1 col-md-1"></div> 
    <div class="col-lg-10 col-md-10 col-sm-12 content"> 
     <div class="row content"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <div class="col-lg-12 col-md-12 col-sm-12 modal-content"> 
       <div class="row content"> 
        <div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black"> 
         <div class="row content"> 



            <!-- pic here --> 
            <img id="pic" src=""> 



         </div> 
        </div> 
        <div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content"> 
         <div class="row content"> 
          <div id="modaluserdata" class="col-lg-12"> 
           <div class="row content"> 
            <div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow"> 

            </div> 
            <div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green"> 

            </div> 
           </div> 
          </div> 
          <div id="modalsocial" class="col-lg-12"> 
           <div class="row content"> 

           </div> 
          </div> 
          <div id="modalcomments" class="col-lg-12"> 
           <div class="row content"> 

           </div> 
          </div> 
          <div id="modaltypecomment" class="col-lg-12"> 
           <div class="row content"> 

           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

モーダル例（垂直に整列していないIMGと）：https://ibb.co/j4nJ1Q

（.contentのみ "高さ：継承" 含み、モーダルである550px）

ありがとうございました！フレキシボックスで簡単

Answer 1

：

div.container{ 
 
    width: 500px; 
 
    height: 400px; 
 
    border: red dashed 2px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items : center; 
 
}

<div class="container"> 
 
    <img src="http://lorempixel.com/300/200/"/> 
 
</div>