水平/竖直居中在旧版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