垂直居中div - 浏览器兼容性

Question

我们说我有一个未知高度的容器Div A，里面有一个已知高度的Div B

A                                                    
┌─────────────────────────────────┐  ▲               
│                                 │  │               
│    B                            │  │               
│   ┌─────────────────────────┐   │  │               
│   │▲                        │   │                  
│   ││Known Height            │   │  Unknown Height  
│   │▼                        │   │                  
│   └─────────────────────────┘   │  │               
│                                 │  │               
│                                 │  │               
└─────────────────────────────────┘  ▼               

我想在B中垂直居中B.现在我找到了这两种方法，都使用绝对定位。

技术1

.B {
    /* height has to be declared or it won't work */
    height: 200px; 
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

在这种情况下，必须声明高度才能使其工作。 它也不适用于Windows手机 参考：http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

技术2

.B {
    /* we have to set width and height */
    height: 120px;
    width: 960px;
    position: absolute;
    margin-top: -60px;      /* half of the .B div height */
    margin-left: -480px;    /* half of the .B div widht */
    top: 50%;
    left: 50%;

}

同样在这种情况下，我们必须知道所包含的B div的高度 参考：https://css-tricks.com/centering-in-the-unknown/

这两者中哪一个是最兼容浏览器的兼容技术？ 对于在大多数浏览器上工作的问题，存在更广泛的解决方案（从IE8作为较低的要求）。

Answer 1

你可以试试这个：

.B {
    height: 120px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

示例1： http://jsfiddle.net/k477zumz/（仅垂直居中）

示例2： http://jsfiddle.net/k477zumz/1/（垂直和水平居中）

Answer 2

以下是另外两种方法：

的 1。在容器上使用伪元素

#container:before {
   content:'';
   display:inline-block;
   vertical-align:middle;
   height:100%;
}

#content {
   display:inline-block;
   vertical-align:middle;
}

此方法应与IE8及以下版本的大多数浏览器兼容：http://caniuse.com/#search=%3Abefore

jsFiddle demo

请注意，在这种情况下，垂直居中的元素需要display:inline-block

的 2。使用display:table-cell;

#container {
   display:table-cell;
   vertical-align:middle;
}

此方法应与99.98％的浏览器兼容：http://caniuse.com/#search=css%20table

jsFiddle demo

Answer 3

如果元素B的大小已知，则绝对定位具有负边距是更可靠的解决方案。它适用于大多数浏览器。