自适应布局下的图片垂直水平居中，自适应手机横竖屏

在html中最常用的功能也是最常见的问题就是图片在div中垂直水平居中问题。
当然水平居中很好办了，div下text-align:center就搞定了，当然前提是图片没有绝对布局。
现在越来越讲究响应式布局，屏幕适配。要求图片的宽高未知，div为全屏大小，横竖屏适应居中
下面就说博主亲测有效的一个方法

html 结构

<div class= "img_frame" id ="img_frame">
    <div class= "center_tool">div >
    class= "image_large" src ="test .jpg">
div>

css 结构

.img_frame .center_tool{
    display: inline-block;
    vertical-align: middle;
    height: 100% ;
    width: 0px ;
    border: none ;
    padding: 0px ;
    margin: 0px 0px 0px -0.8rem ;
}
.img_frame{
    width: 100% ;
    height:100%;
    overflow: hidden ;
    white-space: nowrap;
}
.img_frame .image_large{
    max-width:100% ;
    max-height:100% ;
    vertical-align: middle;
    display: inline-block ;
    margin-left: 0.3rem;
}

测试环境为手机浏览器，可自适应横屏竖屏

竖屏效果

横屏效果