如何在DIV内部垂直和水平对齐img？

Question

我知道这个问题已经被问过很多次了，但我已经试过了我所读到的任何东西。

我想水平和垂直对齐一个div内的img。

容器div在一个modal中显示图片，一旦点击它的预览。那么它将包含任意大小的图片。

我可以水平或垂直对齐，但不能同时对齐。

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>

null

模态示例（img未垂直对齐）:https://ibb.co/j4nj1q

（.content只包含“height：inherit”，模态为550px)

谢谢！

Answer 1

使用Flexbox很容易：

null

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>