How to Make an Image Center (Vertically & Horizontally) Inside a Bigger Div

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Center image horizontally within a div

#artiststhumbnail a img {
display:block;
margin:auto;
}

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

How to center an image in the middle of a div?

Simple and easy method to do this,

.test {  background-color: orange;  width: 700px;  height: 700px;  display:flex;  align-items:center;  justify-content:center;}
<div class="test"><img src="http://via.placeholder.com/350x150"></div>

Center Image Vertical and Horizontal

You could try using a div in your HTML like this:

<div id='dv'></div>

And using a background image like this:

#dv {
background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
background-position: center;
}

html,body,#dv { /* so that the #dv can fill up the page */
width:100%;
height:100%;
}

Fiddle

How to center image inside a div, using CSS?

the parent (#loading) height is the height of the child element (img). because vertical alignment doesn't make sense. set the parent of the greater height, then the inner element can be centered vertically by any available means.