How to vertically AND horizontally align img inside div?

I know this has been asked many times but I've tried pretty much anything I've read so far.

I want to align both horizontally and vertically an img inside a div.

The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.

I can align horizontally OR vertically but not both.

HTML code: http://ift.tt/2oYtEH9

<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>

Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q

(.content only contains "height: inherit" and the modal is 550px)

Thank you!