align image middle vertical code example

Example 1: html center image vertically in a

.yourContainer {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}

Example 2: vertical align image in div

<div class="frame">
  <img src="foo"/>
</div>

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Tags:

Css Example