Image Centered H & V

Contain an image inside a container, then center it horizontally and vertically

by Thomas Orthbandt

HTML

<p>CSS: Contain image and centered</p>
<ol>
  <li>How to make the image contained within a container</li>
  <li>How to make the image centered horizontally and vertically</li>
</ol>

<div class="container">
  <img src="https://c1.staticflickr.com/3/2945/15465313552_6679bd3996_n.jpg">
</div>

CSS

.container {
  background-color: #ccc;
  border: 1px solid #000;
  height: 400px;
  position: relative;
/* display: flex;
  align-items: center;
  transform: translateX(50%);
  width: 50%;
  position: relative;
  top: 50%; */
}

img {
  margin: auto;
  max-width: 100%;/* To Keep within Container */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  /* width: 50%; */
}