How do I position an image inside div so that it overflows to left and right equally instead of overflowing only to the right? [duplicate]

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.

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.

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

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

This is going to center the image horizontally?

Yes, it will center the image horizontally

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.

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

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

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

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

Looks like this answer belongs to a different question :)

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

This is not the correct way to center an image.