"css.css">

Center Image Vertically and Horizontally

Center an image horizontally and vertically in a container.

The image will center horizontally if the style applied to it has text-align:center; and this works in all browsers.
For the vertical centering assign display:table-cell; text-align:center; and vertical-align:middle; to the container.

.centered {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  border:1px silver solid;
}

.centered img { width:50%; }

Example:

Use the CSS above.

Example HTML
<div class="centered">
    <img src="images/Steve_Lage.jpg">
</div>

The image is centered both vertically and horizontally in the div.  It also resizes itself as the div size changes.  Use the grips on the lower right corner to resize the div and see the image resize and continue to center itself vertically and horizontally.

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use