水平/竖直居中在旧版Safari上的bug

今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现.

Bug1: .vertical-center失效

从网上学来了一个很好用的竖直居中的css.

.vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

绝大多数情况都足以应付, 但是同事的iPad上那些被.vertical-center的元素都下移了非常多.

DEMO

我发现是因为这些元素的父元素设置了height: 100%导致的. 它使.vertical-center元素的top: 50%计算值并非是父元素高度的50%, 而是body高度的50%.

(为什么不给父元素加上.vertical-center? 因为我想对父元素position: absolute.)

由于这种情况下, 我要竖直居中的元素的高度都是确定的, 于是我的解决方法是给父元素加上:

.vertical-center-absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

然后为父元素设置好高度即可, 该高度需要恰好容纳待竖直居中的元素.

DEMO

Bug2: .center-block失效

.center-block是bootstrap中的样式, 但是旧版Safari也在某些情况下无法正常水平居中元素.

DEMO

我发现出现这种情况时只需要为待居中元素设置width即可. 但是恰巧我不想对我的待居中元素设置宽度, 因此只能换一种方式: 给父元素设置text-align: center, 给待居中元素设置display: inline-block.

DEMO