CSS: How to center a image within a div vertically and horizontally

Question

i have a div and within div i want to center a image.

here is code

 <div class="inner-div">
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif"/>           
 </div>

.inner-div
{
  margin: auto;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  display: table;
  vertical-align:middle; 
  text-align:center;
  background-color:red;
}

img {
    display:inline-block;
    margin-left: auto;
    margin-right: auto;
}

i use above css but still no luck. image is not getting center in div vertically and horizontally. here is jsfiddle link https://jsfiddle.net/year4qt1/4/

looking for suggestion.

Now it looks fine https://jsfiddle.net/7t2fghtf/1/ thanks for the help Mr @Highdef

I am sure this has been asked many times.. did you do a simple search before asking ? — mlwn, Dec 21 '17 at 12:43

score 0 · Accepted Answer · 2017-12-21T12:52:00.177

You can use absolute positioning and transform on the img while setting the parent container (inner-div) to relative position:

   position:absolute; /* Absolute relative to inner-div */
   left:50%;   /* Top, left and transform for horizontal and vertical alignment without the use of margin or changing the display */
   top:50%;
   transform: translate(-50%,-50%);

Fiddle : https://jsfiddle.net/7t2fghtf/

$("#mybutton").click(function() {

  //  $.ajax("").done(function(){
  //          $("#mycontent").html( $("#anothermymodal").html()); 
  //          })
  setTimeout(function() {

    $("#mycontent").html($("#anothermymodal").html());
  }, 10000);

});

.inner-div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  display: table;
  vertical-align: middle;
  text-align: center;
  background-color: red;
  position: relative;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
  <div style="display:none" id="anothermymodal">

    <div class="modal-body">
      <p>This is a small modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>



<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" id="mycontent">
      <div class="inner-div">
        <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif" />
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Dec 21 '17 at 12:50

There are more ways to do this I would suggest using flex. Add this to your code:

.inner-div {    
  margin: auto;
  width: 100px;
  height: 200px;
  border-radius: 3px;
  display: table;
  vertical-align:middle; 
  text-align:center;
  background-color:red;
  display: flex;
  align-items: center;
}

Fiddle example: https://jsfiddle.net/femu288x/

score -2 · Answer 3 · answered Dec 21 '17 at 12:47

-2

https://css-tricks.com/centering-css-complete-guide/ there are many examples or ways to do this. The position:absolute answer is one way and another is flex (my fav) - check them on the link and try

answered Dec 21 '17 at 12:47

Peter Wilkinson

80
12

CSS: How to center a image within a div vertically and horizontally

3 Answers3