相容IE8的垂直居中

2021-08-20 15:00:39 字數 812 閱讀 8507

子元素不定寬高

1. 利用偽元素 inline-block & vertical-align, 該方法相容ie8 (ie8**)

該方法的居中子元素display屬性為inline-block

.wrap 

.wrap:before

.wrap .content

2. 通過writing-mode屬性改變水平流為垂直流

居中子元素display屬性為inline-block (text-align作用於內聯元素)

你想要上下左右居中的內容(元素,文字或其任意組合)

.center-box

.center-wrap

.center-content

居中子元素的display屬性為block,設定margin: auto 0;

.center-box

.center-wrap

居中子元素定高

居中子元素通過absolute定位,該方法並不是常規的設定top為50%,然後再向上移動居中元素高度的一半,而是將top bottom 設定為0 ,再通過margin: auto定位

.content
參考:

《css世界》

相容ie8的元素居中

今天重新回來修改一下彈窗居中這個功能 彈窗,就是將乙個框框放在螢幕中間,這個框的高度不確定。不需要相容ie8及以下,css用下面這個 完全夠了 pop pop content有時要相容ie8 那麼就要如下 由於父元素是固定定位,採用父元素display table cell vertical ali...

處理ie8相容

1.ie8換成edge模式渲染 x ua compatible content ie edge 2.x ua compatible是針對ie8新加的乙個設定,對於ie8之外的瀏覽器是不識別的,這個區別與content ie 7 在無論頁面是否包含指令,都像是使用了 windows internet ...

IE8下相容background size方法

background size length percentage cover contain ie9 firefox 4 opera chrome 以及 safari 5 支援 background size 屬性。css3 新增的 background size 是乙個很有用的屬性,用於定義背景...