移动端图片垂直居中方案

发表于   |   分类于

移动端如何做图片垂直居中？

开发过程中，PC那套适配方案放在移动端会有很多兼容性问题，甚至的有的时候需要用js代码去动态调整css，很不方便。

同事建议用flexbox，参考了flexbox的实现方案，很强大，看完http://caibaojian.com/flexbox-guide.html这个教程基本上就会了

当然具体实现过程，发现有很多浏览器的标准是不一样的，所以需要做一定程度的兼容，github搜索了下，国外已经有哥们实现了。

下面贴个人常用的scss代码，很方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//scss mixin
@mixin img-wap-ctn($width:auto,$height:$width,$containerSelect:'>div',$imgSelect:img){
    @include size($width,$height);
    //为了兼容低版本的移动浏览器（比如UC，魅族自带浏览器。。。）
    #{$containerSelect} {
        @include size(100%);
        @include flexbox();
        @include justify-content(center);
        @include align-items(center);
        #{$imgSelect}{
            max-width:100%;max-height:100%;
        }
    }
}
//html代码
<div class="img">
    <div>
        <img src="" alt="">
    </div>
</div>
//scss代码
.img{@include img-wap-ctn(240px);}

上面就是个人常用mixin，很方便，简单明了。

中文flexbox入门教程 http://caibaojian.com/flexbox-guide.html

github细化教程，有中文翻译https://github.com/philipwalton/solved-by-flexbox