百度云盘里面的图片是如何实现水平垂直居中的？

Question

我一般写居中都是这样写：

.wrap{position:relative;}
.img{position:absolute; left:50%; top:50%; margin-left:-width/2; margin-top:-height/2;}

1、请问百度云盘怎么计算的left和top值

2、我这种写法有什么弊端，是否可以替换百度的这种写法？

Answer 1

估计是用js通过容器宽高和自身宽高算的。
你的有什么弊端不清楚。
对于ie8以上能保证子元素比其容器小我一般这么写

.wrap{
    position:relative;
}
.inner{
    width:具体值;
    height:具体值;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

后六个可以提出来做一个叫.center的做居中的样式

Answer 2

你的弊端应该是 dom 的长和宽必须是指定的。

可以试试 transform: translate(-50%, -50%);

Answer 3

dom结构：

<div class="c">
    <img src="" alt="">
</div>

css:

.c{
        width: 300px;
        height: 300px;
        text-align: center;
        border:1px solid red;
    }
    .c:before{
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    img{
        display: inline-block;
        width: 123px;
        height: 78px;
        vertical-align: middle;
    }