How to center image horizontally within a div element?

Question

How can I center align (horizontally) an image inside its container div?

Here's the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.

Is it intended that the image is displayed on the same line as the first link (the artisturl one)? — Shoaib, Jun 12 '12 at 00:44
`img`'s are subject to `text-align: center` unless their `display` has been modified. — Jared Farrish, Jun 12 '12 at 00:45
@shoaib the artist URL is not on the same line but I'm not quite sure why. The code seems to say it should be, it's not meant to be anyway. To the rest of you center align does not work, I definitely tried that one. Nor does auto margin when I set the width as a percentage — Jacob Windsor, Jun 12 '12 at 00:53
Does enclosing the `img` in its own `div` and setting `text-align: center` on that div not work either? — Shoaib, Jun 12 '12 at 00:56
Jacob, can you at least post the actual markup the browser sees and not the PHP-infused template? Also, a functioning http://jsfiddle.net always helps. — Jared Farrish, Jun 12 '12 at 00:57
Looking at an [interpretation of your markup](http://jsfiddle.net/userdude/XStjX/1/), which is also missing the top wrapping `div`, and then inspecting in Firebug, I'm not sure what you're up. Should the white box with the line gray border be centered in the light blue box? — Jared Farrish, Jun 12 '12 at 01:17
Unless this, of course, is [what you're after](http://jsfiddle.net/userdude/XStjX/2/). — Jared Farrish, Jun 12 '12 at 01:21
Never mind my comment - I didn't notice the `img` was enclosed in the `a`. I'm dumb. — Shoaib, Jun 12 '12 at 01:22
@JaredFarrish The white box should be centered within the blue container, that's the thumbnail. The picture should also be centered insided that white box — Jacob Windsor, Jun 12 '12 at 13:33

score 987 · Accepted Answer · edited Nov 10 '20 at 14:02

987

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

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

edited Nov 10 '20 at 14:02

user229044

232,980
40
330
338

answered Jun 12 '12 at 00:46

Marvo

17,845
8
50
74

14

I don't think this is a good idea, and also I believe there's some caveats like `margin: auto` is dependent on the containing element having a designated width value. – Jared Farrish Jun 12 '12 at 00:50
4

I'm still improving my CSS skills, so thanks for the interesting study point. But in this case, he is using a fixed width on the container. – Marvo Jun 12 '12 at 00:55
1

What exactly does designated width mean in this context? Definitely seems like useful knowledge to have. – Shoaib Jun 12 '12 at 01:09
1

See this [fiddle I made](http://jsfiddle.net/userdude/XStjX/1/); I'm not sure what to think. What you're suggesting won't do anything, and the `img` I believe would need a width defined anyways to have any effect with `auto`. – Jared Farrish Jun 12 '12 at 01:20
2

You didn't actually implement the solution I presented. Second, the enclosing div has a width of 120px, which is about the same as the width of the image, making it hard to see if it's actually centering the image. Here's my solution: http://jsfiddle.net/marvo/3k3CC/2/ – Marvo Jun 12 '12 at 02:38
What if the `img` width is greater than the container div? – Teo Mihaila Jul 15 '19 at 10:19
In my case @Marvo solution worked, but `display: flex; justify-content: center;` did not work. – Guntar May 29 '20 at 13:36
JSFiddle doesnt work anymore – Lennart May 10 '23 at 13:43

m4n0 · Answer 2 · 2020-05-05T01:35:03.130

CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.

HTML

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

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Output:

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;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<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. — Marc Rochkind, Nov 16 '17 at 22:59
In my case, the div has a given size (e.g. 50px) and this will stretch the image to be at 50px. — Max, Aug 07 '18 at 21:39
@Max In that case, you can apply `align-self` to the image element like this https://jsfiddle.net/3fgvkurd/ — m4n0, Aug 08 '18 at 09:38

score 77 · Answer 3 · edited Jan 20 '18 at 23:10

77

I just found this solution below on the W3 CSS page and it answered my problem.

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

Source: http://www.w3.org/Style/Examples/007/center.en.html

edited Jan 20 '18 at 23:10

TylerH

20,799
66
75
101

answered Aug 29 '14 at 13:35

mk.hd

871
6
3

I'm using `max-width: 100%; max-height: 100%;` to resize the image if the screen smaller than image, but in this case it's not centered. Any suggestions on how to center with those two attributes applied – Mando Jun 08 '16 at 00:07

Mehmet Yaden · Answer 4 · 2020-12-27T20:44:24.413

22

This also would do it

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

edited Dec 27 '20 at 20:44

answered Oct 06 '14 at 11:13

Mehmet Yaden

277
3
9

Did you mean `text-align:center;` and `margin:0 5px;` ? I added a `;` – jagb Apr 22 '17 at 23:25
@jagb semicolons are not required for the last property in a selector block. – TylerH Jan 20 '18 at 23:11
4

@TylerH Thats true, semicolons are not required for the last property in a selector block but it's always saver to use the semicolons.. What if I write a CSS file, another developer edits my file later, they add some code (after the line with the missing semicolon, the line I wrote before in that CSS file) and their height, width or other declaration isn't working (or worse yet, they doesn't notice that it's not working). I would say It's safer to leave the semicolons in. This is why I use the semicolons and never leave the semicolons out. – jagb Jan 23 '18 at 02:40
@jagb If another developer edits your file later, they will add in semicolons where necessary, or it will be their problem for writing code that has errors. The response to your initial comment is still: "semicolons on the last line in CSS are a style choice". – TylerH Jan 23 '18 at 15:52
I agree with jagb. This site should promote good style choices. A good style does not leave code behind that is easily broken. Putting the semicolon on every line costs you maybe 1/10th of a second, debugging to find a single missing semicolon can cost you hours. Thats why the big tech companies insist on it: [Google HTML/CSS Style Guide - Declaration Stops](https://google.github.io/styleguide/htmlcssguide.html#Declaration_Stops) – Georg Patscheider Nov 29 '19 at 08:46
For center aligning of image, **text-align:center** with margin-right and left set to **auto** worked just fine; without any more settings; and BTW, that semi-colon needs to be present. – Ajowi Sep 03 '20 at 08:34
Just to avoid any further comment on this topic, I have edited my answer to add the semicolons. Agreed, that the last line should have semicolons. – Mehmet Yaden Dec 27 '20 at 20:45

Kevin · Answer 5 · 2018-01-21T05:26:01.567

18

The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

You can then apply the CSS class you created to your tag as follows:

HTML

<img class="center" src="image.jpg" />

You can also inline the CSS in your element(s) by doing the following:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.

edited Jan 21 '18 at 05:26

answered Jan 20 '18 at 22:59

Kevin

181
1
6

did the job, but for browser compatibility, you will need to use the other forms of transform. – Jay Smoke Jan 22 '18 at 12:44
1

I also found this [link](https://css-tricks.com/centering-css-complete-guide/) to be helpful. It shows a similar `transform: translate(-50%)` trick you show here, but uses it in conjunction with `margin-left: 50%`, rather than `left:50%`. It also contrasts solutions for when the item has` relative` vs `absolute` positioning. This is mostly for my future reference, so I can refer here to your Answer, and a solution I previously used, in 1 (upvoted) location. :-) https://css-tricks.com/centering-css-complete-guide/ – SherylHohman Jun 30 '20 at 11:25
1

Oh, here's another tidbit I found regarding positioning on the element & container [at w3.org] (https://www.w3.org/Style/Examples/007/center.en.html) for using the `transform: translate` trick: Essential rules are: 1) **Make the *container* `relative`ly positioned, which declares it to be a container for absolutely positioned elements.** 2) **Make the *element* itself `absolute`ly positioned.** 3) Place it halfway down the container with 'top: 50%' (or horizontally with `left:50%`). 4) Use a `translation` to move the element up by half its own height (or horizontally by half its width). – SherylHohman Jun 30 '20 at 11:40

score 12 · Answer 6 · edited Jun 14 '19 at 20:12

12

This is what I ended up doing:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Which will limit the image height to 600px and will horizontally-center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.

edited Jun 14 '19 at 20:12

HoldOffHunger

18,769
10
104
133

answered Apr 28 '15 at 08:40

Cherno

319
3
6

score 8 · Answer 7 · answered Jun 12 '12 at 01:37

8

I am going to go out on a limb and say that the following is what you are after.

Note, the following I believe was accidentally omitted in the question (see comment):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

So what you need is:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

answered Jun 12 '12 at 01:37

Jared Farrish

48,585
17
95
104

Hmm... I'll bet that works. I centered the IMAGE in my solution, but I can see how question could be interpreted as centering the div-enclosing-the-image inside another div. Either way, same solution. – Marvo Jun 12 '12 at 02:42
Neither solution is working in practice. I had tried both solutions before it just won't work. Please refer to the edit in the question – Jacob Windsor Jun 12 '12 at 13:27

incalite · Answer 8 · 2019-10-18T13:52:07.427

6

Add this to your CSS:

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

Just referencing a child element which in that case is the image.

edited Oct 18 '19 at 13:52

answered Jan 17 '16 at 20:32

incalite

3,077
3
26
32

2

this is good for when you still want access to the top margin, .. better than margin 0 auto – tallgirltaadaa Mar 27 '17 at 23:00

score 6 · Answer 9 · edited Dec 07 '21 at 08:00

yeah, the code like this work fine

<div>
 <img/>
</div>

but just to remind u, the style for image

object-fit : *depend on u*

so the final code be like Example

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

div img {
  object-fit: contain;
}

<div style="border: 1px solid red;">
  <img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;" />
</div>

score 3 · Answer 10 · edited Jun 14 '19 at 20:08

3

Put an equal pixel padding for left and right:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

edited Jun 14 '19 at 20:08

HoldOffHunger

18,769
10
104
133

answered Mar 25 '15 at 03:37

V-SHY

3,925
4
31
47

score 3 · Answer 11 · edited Jun 14 '19 at 20:08

3

To center an image horizontally, this works:

<p style="text-align:center"><img src=""></p>

edited Jun 14 '19 at 20:08

HoldOffHunger

18,769
10
104
133

answered Jun 06 '17 at 08:20

kalariya parikshith

117
1
6

Yes, but if you plan to display the image as block to prevent that boring white space under it, this wont work anymore... – Dr Fred Mar 17 '18 at 15:27

score 2 · Answer 12 · edited Feb 22 '16 at 07:44

2

Put the picture inside a newDiv. Make the width of the containing div the same as the image. Apply margin: 0 auto; to the newDiv. That should center the div within the container.

edited Feb 22 '16 at 07:44

prasun

7,073
9
41
59

answered Feb 22 '16 at 05:21

Setu

21
1

score 2 · Answer 13 · answered Mar 24 '16 at 08:42

Use positioning. The following worked for me... (Horizontally and Vertically Centered)

With zoom to the center of the image (image fills the div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Without zoom to the center of the image (image does not fill the div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

antelove · Answer 14 · 2017-09-25T07:34:02.247

Center a image in a div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

score 2 · Answer 15 · answered Jan 20 '19 at 02:44

2

I have tried a few ways. But this way works perfectly for me

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

answered Jan 20 '19 at 02:44

Ifwat Ibrahim

1,523
4
16
28

score 2 · Answer 16 · answered Jun 02 '20 at 22:09

2

A responsive way to center an image can be like this:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

answered Jun 02 '20 at 22:09

Ali Safari

1,535
10
19

score 1 · Answer 17 · answered Dec 19 '16 at 12:57

you can align your content using flex box with minimum code

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

score 0 · Answer 18 · answered Jul 11 '17 at 20:21

If you have to do this inline (such as when using an input box),
here is a quick hack that worked for me: surround your (image link in this case)
in a div with style="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

score 0 · Answer 19 · answered Jun 21 '20 at 05:02

0

.document {
  align-items: center;
  background-color: hsl(229, 57%, 11%);
  border-radius: 5px;
  display: flex;
  height: 40px;
  width: 40px;
}

.document img {
  display: block;
  margin: auto;
}

<div class="document">
  <img src="./images/icon-document.svg" alt="icon-document" />
</div>

answered Jun 21 '20 at 05:02

Nick GM

1

2

Welcome to stackoverflow! Please add some explanation to your answer. – dvr Jun 21 '20 at 05:37

score 0 · Answer 20 · answered Jul 13 '23 at 19:57

0

on the img put

left:0;
right:0;

answered Jul 13 '23 at 19:57

wesmartin17

55
9

This is going to *center* the image horizontally? – General Grievance Aug 03 '23 at 12:16
Yes, it will center the image horizontally – wesmartin17 Aug 04 '23 at 15:18
1

Then why doesn't it work in this example: https://jsfiddle.net/pk0L34yv/ ? If you can show that this works, please put a runnable code snippet in your answer. – General Grievance Aug 04 '23 at 15:43
Ah my bad it also needs display:block and margin:auto https://jsfiddle.net/no673wmh/ – wesmartin17 Aug 04 '23 at 15:46
You also added `display:block`. The `left` and `right` aren't related to why that works now. – General Grievance Aug 04 '23 at 15:49

score -1 · Answer 21 · answered Apr 17 '16 at 15:59

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>

score -1 · Answer 22 · answered Feb 15 '18 at 11:49

-1

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

answered Feb 15 '18 at 11:49

Siva Kaliyamoorthy

29
3

6

Welcome to stackoverflow! Please add some explanation to your answer. – Maximilian Peters Feb 15 '18 at 13:04
If we want to fix particular `
`or `
` Both Vertically and Horizontally center of the Page for all devices, simply you can use this style code!!!!
– Siva Kaliyamoorthy Mar 15 '18 at 10:32
Looks like this answer belongs to a different question :) – m4n0 Jun 29 '18 at 19:32

score -1 · Answer 23 · answered Feb 12 '21 at 14:28

-1

Style.css

img#center-img{

 display: block;
 margin: auto;
}

Html

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

answered Feb 12 '21 at 14:28

Callum

31
4

2

Please only add answers that haven't been provided. This is, as it happens, the same as the accepted answer, among others. – TylerH Feb 12 '21 at 15:03

score -1 · Answer 24 · answered Nov 23 '21 at 14:33

-1

To center a image use this css. You have to give width at first of the image.

img{
  width: 300px;
  position: fixed;
  left0;
  right:0;

}

answered Nov 23 '21 at 14:33

Sk Shoyeb

147
1
3

This is not the correct way to center an image. – Sfili_81 Nov 24 '21 at 15:37

How to center image horizontally within a div element?

24 Answers24

Center a image in a div

Linked

Related