永恒的水平垂直居中

css中居中问题是永远的话题特别是垂直居中,各路高手使出各种“奇异淫”的方法。前段时间一直搞JS,好久没有弄css了这次公司做了电商。遇到商品的图片需要处理,所以得总结一下,不能每次写都去查资料。

代码结构:

<div class="box">
    <img src="#" alt="" width="100" height="100">
</div>

.box{
    width: 400px;
    height: 400px;
    background-color:#999;
    text-align: center;
}

.box img{

}

下面就只写css代码。

1. ie9+,FF,Chrome等

.box img{
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

这个问题会导致元素模糊,解决方法:在父级元素上添加preserve-3d。像下面:

.box{
    transform-style: preserve-3d;
}

2. ie8+,FF,Chrome等

.box{
    width: 400px;
    height: 400px;
    background-color:#999;
    text-align: center;

    display:table-cell;
    vertical-align: middle;
}

3. ie6+,FF,Chrome等

html:

<div class="box">
    <i></i><img src="#" alt="" width="100" height="100">
</div>

css:

.box img{
    vertical-align: middle;
}
.box i{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    vertical-align: middle;
}

注:<i></i>要和<img/>元素紧挨着,这牵扯到inline-block的缝隙问题。

4. ie9+,FF,Chrome等

.box:before{
    display: inline-block;
    content:"";
    height: 100%;
    vertical-align: middle;
}
.box img{
    vertical-align: middle;
}

其实这个和上面的原理是一样的,只是说那个参考元素不要手动添加,如果你有代码洁癖并且浏览器兼容要求达到这个方法还是靠谱的。

5. ie8+,FF,Chrome等

.box{
    width: 400px;
    height: 400px;
    background-color:#999;
    position: relative;
}
.box img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

6. ie10+,FF,Chrome等

.box{
    width: 400px;
    height: 400px;
    background-color:#999;
    display:flex;
    justify-content:center;
    align-items:center;
}

7. ie6+,FF,Chrome等(图片尺寸已知)

.box{
    width: 400px;
    height: 400px;
    background-color: #666;
    position:relative;
}

.box img{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top: -50px;
}

以上就是总结和收集的一些方法,方便自己同时服务他人。

参考链接:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

http://www.w3.org/Style/Examples/007/center

http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height

https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

http://www.vanseodesign.com/css/vertical-centering/

https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

http://davidwalsh.name/css-vertical-center

分享到: