水平 豎直居中在舊版Safari上的bug

今天調了兩個出現在舊版safari上的layout bug. 它們最初是在同事的ipad上被發現的, 我在自己桌面上安裝的safari 5.1.7上也能夠復現.

從網上學來了乙個很好用的豎直居中的css.

.vertical-center

demo

我發現是因為這些元素的父元素設定了height: 100%導致的. 它使.vertical-center元素的top: 50%計算值並非是父元素高度的50%, 而是body高度的50%.

(為什麼不給父元素加上.vertical-center? 因為我想對父元素position: absolute.)

由於這種情況下, 我要豎直居中的元素的高度都是確定的, 於是我的解決方法是給父元素加上:

.vertical-center-absolute

demo

.center-block是bootstrap中的樣式, 但是舊版safari也在某些情況下無法正常水平居中元素.

demo

我發現出現這種情況時只需要為待居中元素設定width即可. 但是恰巧我不想對我的待居中元素設定寬度, 因此只能換一種方式: 給父元素設定text-align: center, 給待居中元素設定display: inline-block.

demo

html 水平豎直居中

line height 容器高度 doctype html html lang en head meta charset utf 8 title title title style white space 換行方式 normal 正常換行 nowrap 不換行 text indent 首行縮排 em...

css 元素水平 豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 設定自身margin left auto margin right auto 別忘了設定自身寬度 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設...

css 元素水平 豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 設定自身margin left auto margin right auto 別忘了設定自身寬度 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設...