Rectangle 27 21

Put a large div inside the div, center that, and the center the image inside that div.

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>
.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

To center it vertically also, you can use the same for the inner div, but you would need the height of the image to place it absolutely inside it.

This ended up with the left edge of the image centered within the "imageContainer". As I commented above, our image container div is fluid width and fixed height.

@Tom: If I remove the width setting on the container, it will be the width of the parent, and the image is centered even if the page is narrower than the image, i.e. as much of the left edge as the right edge will be hidden: jsfiddle.net/Guffa/L9BnL/2

Thanks for the inspiration. I use position: relative for .imageCenter. This way I don't need the position: relative for the parent container.

css - center oversized image in div - Stack Overflow

css
Rectangle 27 315

Try something like this. This should center any huge element in the middle vertically and horizontally with respect to its parent no matter both of their sizes.

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

wonderful: this works with any element. even with html 5 video... thanks!

This is incredible but I'm curious... why does this work?

Why not use -100% for top/right/bottom/left? With that the container could have literally any width.

Yeah I've experienced the -100% issue as well ^^. Btw: if you add min-width and min-height of 100% you basically get a background-size: cover; behaviour with image tags -> jsfiddle

css - center oversized image in div - Stack Overflow

css
Rectangle 27 45

This is an old Q, but a modern solution without flexbox or position absolute works like this.

margin-left: 50%;
transform: translateX(-50%);
.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}
<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

So why does it work? At first glance it seems that we shift 50% to the right and then 50% to the left again. That would result in zero shift, so what? But the 50% are not the same, because context is important. If you calculate relative margins, the margin is calculated as percentage of the parent element, while in the transform the 50% is relative to the same element. Width that is for both.

We have this situation before we add the CSS

With the added style margin-left: 50% we have

transform: translateX(-50%)
+-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

Unfortunately this does only work for horizontal centering as the margin percentage calculation is always relative to the width.

It does not work for vertical alignment (when .inner has larger height that .outer)

@cronfy No. vertically it will not work, because margin-top: 50% will be 50% of the width. not the height as desired.

that is by far the most elegant solution

css - center oversized image in div - Stack Overflow

css
Rectangle 27 3

i'm a huge fan of making an image the background of a div/node -- then you can just use the background-position: center attribute to center it regardless of screen size

This is not an accessible way of using images. It may work fine for decorative images, but any image which is informative needs alt text.

css - center oversized image in div - Stack Overflow

css
Rectangle 27 4

Do not use fixed or an explicit width or height to the image tag. Instead, code it:

max-width:100%;
      max-height:100%;

css - center oversized image in div - Stack Overflow

css
Rectangle 27 1

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-item: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}
<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

Nice! It can be simplified, too. The trick is done by display: flex on the parent container and align-self: center on the image. Here's an optimized version: codepen.io/anon/pen/dWKyey

css - center oversized image in div - Stack Overflow

css
Rectangle 27 232

#doit {
    background: url(url) no-repeat center;
}

Doesn't work if a background image is a sprite.

Thank you for the simple solution @Jake Lucas

html - How to center a (background) image within a div? - Stack Overfl...

html css image background center
Rectangle 27 232

#doit {
    background: url(url) no-repeat center;
}

Doesn't work if a background image is a sprite.

Thank you for the simple solution @Jake Lucas

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - How to center a (background) image within a div? - Stack Overfl...

html css image background center
Rectangle 27 67

text-align: center will not work because the background image is not part of the document and is therefore not part of the flow.

background-position:center
background-position: center center
background-position: horizontal vertical
background-position:center;

html - How to center a (background) image within a div? - Stack Overfl...

html css image background center
Rectangle 27 67

text-align: center will not work because the background image is not part of the document and is therefore not part of the flow.

background-position:center
background-position: center center
background-position: horizontal vertical
background-position:center;

html - How to center a (background) image within a div? - Stack Overfl...

html css image background center
Rectangle 27 36

Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.

I used a div as a fake img but it should work the same.

Good answer! Helped me out a lot!

html - Aligning multiple images horizontally in the center of a div - ...

html css image center alignment
Rectangle 27 36

Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.

I used a div as a fake img but it should work the same.

Good answer! Helped me out a lot!

html - Aligning multiple images horizontally in the center of a div - ...

html css image center alignment
Rectangle 27 8

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align:center;
    line-height:400px;
}


#parent img {
    vertical-align:middle;
}

I think this actually works regardless of the image size, check the demo out

@anonymousdownvotingislame put any image inside that & it will be in center

As far as I can tell, this actually works completely. I've not seen vertical-align used like this before . . .

@sandeep I can not get the height and size of img . If there any way to center an image without defining height and width.

css - center an image in div vertically and horizontally - Stack Overf...

css html image
Rectangle 27 14

background-position: 50% 50%;

useful if you need the image horizontally centered but on top vertically : background-position: 50% 0%;

50% 0 is shorter then ;-) In CSS, you never need any unit when value is 0

html - How to center a (background) image within a div? - Stack Overfl...

html css image background center
Rectangle 27 14

background-position: 50% 50%;

useful if you need the image horizontally centered but on top vertically : background-position: 50% 0%;

50% 0 is shorter then ;-) In CSS, you never need any unit when value is 0

html - How to center a (background) image within a div? - Stack Overfl...

html css image background center
Rectangle 27 33

CSS flexbox can do it with justify-content: center on the image parent element.

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>
.image-container {
  display: flex;
  justify-content: center;
}
body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
}
.image-3 {
  width: 300px;
}
<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Excellent solution when the browser support this, which mine does. Can also use align-items to center vertically. The various margin solutions don't work for me because the element to be centered doesn't have width and height attributes.

html - Center align image within div horizontally - Stack Overflow

html css
Rectangle 27 31

CSS flexbox can do it with justify-content: center on the image parent element.

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>
.image-container {
  display: flex;
  justify-content: center;
}
body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
}
.image-3 {
  width: 300px;
}
<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

html - Center align image within div horizontally - Stack Overflow

html css
Rectangle 27 292

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.

This is usually the best answer, unless the size of the image can vary from smaller to bigger than the container's size. In the 'smaller' case, it will be fine, but in the 'bigger' case, your image will be clipped.

Not as SEO/reader friendly if you want to add an ALT attribute.

What about if we are using a sprite? I am trying to center the background image, but I'm using a CSS sprite. Any ideas?

@Nathan this is not an easy task. You can do it though if you know the exact dimensions of the div and leave enough transparent space around the image on the sprite so that the other images on the sprite are not displayed.

My images are always have a different size, How to applied this when image have different different size ?

html - How to make an image center (vertically & horizontally) inside ...

html css
Rectangle 27 292

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

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;
}
#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)

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

Let the browser take the strain...

This is usually the best answer, unless the size of the image can vary from smaller to bigger than the container's size. In the 'smaller' case, it will be fine, but in the 'bigger' case, your image will be clipped.

This is usually the best answer, unless the size of the image can vary from smaller to bigger than the container's size. In the 'smaller' case, it will be fine, but in the 'bigger' case, your image will be clipped.

Not as SEO/reader friendly if you want to add an ALT attribute.

Not as SEO/reader friendly if you want to add an ALT attribute.

What about if we are using a sprite? I am trying to center the background image, but I'm using a CSS sprite. Any ideas?

What about if we are using a sprite? I am trying to center the background image, but I'm using a CSS sprite. Any ideas?

@Nathan this is not an easy task. You can do it though if you know the exact dimensions of the div and leave enough transparent space around the image on the sprite so that the other images on the sprite are not displayed.

@Nathan this is not an easy task. You can do it though if you know the exact dimensions of the div and leave enough transparent space around the image on the sprite so that the other images on the sprite are not displayed.

My images are always have a different size, How to applied this when image have different different size ?

My images are always have a different size, How to applied this when image have different different size ?

html - How to make an image center (vertically & horizontally) inside ...

html css
Rectangle 27 291

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.

This is usually the best answer, unless the size of the image can vary from smaller to bigger than the container's size. In the 'smaller' case, it will be fine, but in the 'bigger' case, your image will be clipped.

Not as SEO/reader friendly if you want to add an ALT attribute.

What about if we are using a sprite? I am trying to center the background image, but I'm using a CSS sprite. Any ideas?

@Nathan this is not an easy task. You can do it though if you know the exact dimensions of the div and leave enough transparent space around the image on the sprite so that the other images on the sprite are not displayed.

My images are always have a different size, How to applied this when image have different different size ?

html - How to make an image center (vertically & horizontally) inside ...

html css