Center a large image of unknown size inside a smaller div with overflow hidden

by

What about this:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

This assumes that the parent div is positioned relatively. I think this works if you want the .img relatively positioned rather than absolutely. Just remove the position: absolute and change top/left to margin-top and margin-left.

You’ll probably want to add browser support with transform, -moz-transform etc.

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  3. CSS – How to Style a Selected Radio Buttons Label?
  4. Table with fixed header and fixed column on pure css
  5. How to display scroll bar onto a html table
  6. Favicon not showing up in Google Chrome [duplicate]
  7. Why can’t I center with margin: 0 auto?
  8. Apply CSS styles to an element depending on its child elements [duplicate]
  9. Difference between Width:100% and width:100vw?
  10. CSS background image alt attribute
  11. 3 column layout HTML/CSS
  12. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  13. HTML5 / CSS3 Circle with Partial Border
  14. Why display grid with 100% in grid-template-columns goes out of body?
  15. Can I use non existing CSS classes?
  16. Remove default text/placeholder present in html5 input element of type=date
  17. issue with CSS media queries(scrollbar)
  18. How to resize an image to fit in the browser window?
  19. Bootstrap right Column on top on mobile view
  20. How to display a range input slider vertically
  21. how to overwrite css style
  22. Force an image to fit and keep aspect ratio
  23. How can I horizontally center an element?
  24. CSS3 transform not working
  25. What is the purpose of .row in Bootstrap? [duplicate]
  26. How do I make flex box work in safari?
  27. Zebra striping a flexbox table with wrapping items
  28. Removing unwanted table cell borders with CSS
  29. Create a Reverse Clip-Path – CSS or SVG
  30. Bootstrap row and col explanation

Leave a Comment