How to set a image vertically center align inside div

<div class="imgFrame">
    <img src="IMG SRC" />
</div>

<style>
.imgFrame {
    height: 100%;   
    width: 100%;
    text-align: center; 
}
.imgFrame:before,
.imgFrame {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.imgFrame img {
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}
</style>