javascript - 如何垂直和水平对齐 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只包含“height: inherit”，modal为550px)

谢谢!

Answer 1

使用 Flexbox 很简单:

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>