CSS: How to center a image within a div vertically and horizontally [duplicate] - css

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 5 years ago.
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

Answer 1

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>

Answer 2

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/

Answer 3

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