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
– Shoaib, Commented Jun 12, 2012 at 0:44
img's are subject to text-align: center unless their display has been modified. — Jared Farrish
– Jared Farrish, Commented Jun 12, 2012 at 0:45
Jacob, can you at least post the actual markup the browser sees and not the PHP-infused template? Also, a functioning jsfiddle.net always helps. — Jared Farrish
– Jared Farrish, Commented Jun 12, 2012 at 0:57
Never mind my comment - I didn't notice the img was enclosed in the a. I'm dumb. — Shoaib
– Shoaib, Commented Jun 12, 2012 at 1:22

user229044 · Accepted Answer · 2020-11-10 14:02:07Z

1005

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

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

edited Nov 10, 2020 at 14:02

user229044♦

241k41 gold badges346 silver badges350 bronze badges

answered Jun 12, 2012 at 0:46

Marvo

18.2k8 gold badges53 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jared Farrish Over a year ago

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.

Marvo Over a year ago

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.

Shoaib Over a year ago

What exactly does designated width mean in this context? Definitely seems like useful knowledge to have.

Jared Farrish Over a year ago

See this fiddle I made; 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.

Marvo Over a year ago

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: jsfiddle.net/marvo/3k3CC/2

|

m4n0 · Accepted Answer · 2020-05-05 01:35:03Z

155

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>

edited May 5, 2020 at 1:35

answered Dec 10, 2015 at 13:04

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

3 Comments

Marc Rochkind Over a year ago

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.

Max Over a year ago

In my case, the div has a given size (e.g. 50px) and this will stretch the image to be at 50px.

m4n0 Over a year ago

@Max In that case, you can apply align-self to the image element like this jsfiddle.net/3fgvkurd

TylerH · Accepted Answer · 2018-01-20 23:10:55Z

76

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, 2018 at 23:10

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Aug 29, 2014 at 13:35

mk.hd

8696 silver badges3 bronze badges

2 Comments

Mando Over a year ago

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

Ralf Over a year ago

This does not work, if the image does not fit inside the div

Kostas Minaidis · Accepted Answer · 2025-02-18 00:32:29Z

23

This also would do it

#imagewrapper {
    text-align: center;
}

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

edited Feb 18 at 0:32

Kostas Minaidis

5,6814 gold badges21 silver badges31 bronze badges

answered Oct 6, 2014 at 11:13

Mehmet Yaden

2873 silver badges9 bronze badges

7 Comments

jagb Over a year ago

Did you mean text-align:center; and margin:0 5px; ? I added a ;

TylerH Over a year ago

@jagb semicolons are not required for the last property in a selector block.

jagb Over a year ago

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

TylerH Over a year ago

@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".

Georg Patscheider Over a year ago

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

|

Kevin · Accepted Answer · 2018-01-21 05:26:01Z

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, 2018 at 5:26

answered Jan 20, 2018 at 22:59

Kevin

1811 silver badge6 bronze badges

3 Comments

Jay Smoke Over a year ago

did the job, but for browser compatibility, you will need to use the other forms of transform.

SherylHohman Over a year ago

I also found this link 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. :-) css-tricks.com/centering-css-complete-guide

SherylHohman Over a year ago

Oh, here's another tidbit I found regarding positioning on the element & container [at w3.org] (w3.org/Style/Examples/007/center.en.html) for using the transform: translate trick: Essential rules are: 1) Make the container relatively positioned, which declares it to be a container for absolutely positioned elements. 2) Make the element itself absolutely 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).

HoldOffHunger · Accepted Answer · 2019-06-14 20:12:40Z

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, 2019 at 20:12

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

answered Apr 28, 2015 at 8:40

Cherno

3293 silver badges7 bronze badges

Comments

Jared Farrish · Accepted Answer · 2012-06-12 01:37:30Z

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, 2012 at 1:37

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

2 Comments

Marvo Over a year ago

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.

Jacob Windsor Over a year ago

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

Teocci · Accepted Answer · 2021-12-07 08:00:02Z

7

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>

edited Dec 7, 2021 at 8:00

Teocci

9,3651 gold badge71 silver badges56 bronze badges

answered May 21, 2020 at 9:56

Thomas Bui

3086 silver badges11 bronze badges

Comments

incalite · Accepted Answer · 2019-10-18 13:52:07Z

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, 2019 at 13:52

answered Jan 17, 2016 at 20:32

incalite

3,2273 gold badges29 silver badges32 bronze badges

1 Comment

tallgirltaadaa Over a year ago

this is good for when you still want access to the top margin, .. better than margin 0 auto

HoldOffHunger · Accepted Answer · 2019-06-14 20:08:16Z

3

Put an equal pixel padding for left and right:

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

edited Jun 14, 2019 at 20:08

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

answered Mar 25, 2015 at 3:37

V-SHY

4,1454 gold badges35 silver badges49 bronze badges

Comments

HoldOffHunger · Accepted Answer · 2019-06-14 20:08:40Z

3

To center an image horizontally, this works:

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

edited Jun 14, 2019 at 20:08

HoldOffHunger

21.3k11 gold badges123 silver badges146 bronze badges

answered Jun 6, 2017 at 8:20

kalariya parikshith

1171 silver badge6 bronze badges

1 Comment

Dr Fred Over a year ago

Yes, but if you plan to display the image as block to prevent that boring white space under it, this wont work anymore...

prasun · Accepted Answer · 2016-02-22 07:44:18Z

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, 2016 at 7:44

prasun

7,3799 gold badges47 silver badges62 bronze badges

answered Feb 22, 2016 at 5:21

Setu

211 bronze badge

Comments

ThomasAFink · Accepted Answer · 2016-03-24 08:42:41Z

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 · Accepted Answer · 2017-09-25 07:34:02Z

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>

Ifwat · Accepted Answer · 2019-01-20 02:44:16Z

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, 2019 at 2:44

Ifwat

1,5634 gold badges16 silver badges30 bronze badges

Comments

Ali Safari · Accepted Answer · 2020-06-02 22:09:52Z

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 2, 2020 at 22:09

Ali Safari

1,81515 silver badges21 bronze badges

Comments

Santosh Khalse · Accepted Answer · 2016-12-19 12:57:40Z

1

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/

answered Dec 19, 2016 at 12:57

Santosh Khalse

12.9k3 gold badges38 silver badges36 bronze badges

Comments

SherylHohman · Accepted Answer · 2017-07-11 20:21:55Z

0

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 */

answered Jul 11, 2017 at 20:21

SherylHohman

18.2k18 gold badges94 silver badges100 bronze badges

Comments

Nick GM · Accepted Answer · 2020-06-21 05:02:40Z

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, 2020 at 5:02

Nick GM

1

1 Comment

dvr Over a year ago

Welcome to stackoverflow! Please add some explanation to your answer.

wesmartin17 · Accepted Answer · 2023-07-13 19:57:15Z

0

on the img put

left:0;
right:0;

answered Jul 13, 2023 at 19:57

wesmartin17

5510 bronze badges

5 Comments

General Grievance Over a year ago

This is going to center the image horizontally?

wesmartin17 Over a year ago

Yes, it will center the image horizontally

General Grievance Over a year ago

Then why doesn't it work in this example: jsfiddle.net/pk0L34yv ? If you can show that this works, please put a runnable code snippet in your answer.

wesmartin17 Over a year ago

Ah my bad it also needs display:block and margin:auto jsfiddle.net/no673wmh

General Grievance Over a year ago

You also added display:block. The left and right aren't related to why that works now.

KES NORKUS · Accepted Answer · 2016-04-17 15:59:02Z

<!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>

Siva Kaliyamoorthy · Accepted Answer · 2018-02-15 11:49:20Z

-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, 2018 at 11:49

Siva Kaliyamoorthy

294 bronze badges

3 Comments

Maximilian Peters Over a year ago

Welcome to stackoverflow! Please add some explanation to your answer.

Siva Kaliyamoorthy Over a year ago

If we want to fix particular <div> or <section> Both Vertically and Horizontally center of the Page for all devices, simply you can use this style code!!!!

m4n0 Over a year ago

Looks like this answer belongs to a different question :)

Callum · Accepted Answer · 2021-02-12 14:28:34Z

-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, 2021 at 14:28

Callum

414 bronze badges

1 Comment

TylerH Over a year ago

Please only add answers that haven't been provided. This is, as it happens, the same as the accepted answer, among others.

Sk Shoyeb · Accepted Answer · 2021-11-23 14:33:35Z

-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, 2021 at 14:33

Sk Shoyeb

1771 silver badge3 bronze badges

1 Comment

law_81 Over a year ago

This is not the correct way to center an image.

Collectives™ on Stack Overflow

How to center image horizontally within a div element?

24 Answers 24

9 Comments

3 Comments

2 Comments

7 Comments

3 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Center a image in a div

Comments

Comments

Comments

Comments

Comments

1 Comment

5 Comments

Comments

3 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

24 Answers 24

9 Comments

3 Comments

2 Comments

7 Comments

3 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Center a image in a div

Comments

Comments

Comments

Comments

Comments

1 Comment

5 Comments

Comments

3 Comments

1 Comment

1 Comment

Linked

Related