資訊專欄INFORMATION COLUMN
placeholder: 我是一個不正經的屬性.
----題記
???????說道頁面垂直居中, 在大家的思維中, 很快就能有若干個(常用/用過)解決方法, 但是在很多面試題中, 都會出現這么一個題, 寫出多個垂直居中的方法, (其實掌握比較通用的, 兼容性好的方法就行了, 其他的就當看著玩, 有遺漏的歡迎補充 ps: 最好私信我給我留點面子 /壞笑). 那么下面就介紹幾種垂直居中的方法:
默認的樣式??????首先我先有一些默認的樣式(都是一些比較常規的樣式表, 一看就懂, 對本文核心影響不大).
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ex{
width:100% ;
height: 100px;
background: #eee;
text-align: center;
margin: 10px 0;
}
.ex_1{
background-color: lightgreen;
}
/* 本來想用多個, 后來考慮沒什么用, 就留下了一個子元素 */
.ex > div{
margin: 0 auto;
width: 100px;
height: 30px;
line-height: 30px;
}
方法一
父元素設置{ display: flex; align-items: center; }
原理是運用了flex布局, 同時使用css3的屬性align-items, 兼容性較差.
展示效果:
方法二父元素設置{ display: flex; } 子元素設置{ align-self: center; }
與方法一相同, 只是垂直居中的屬性添加到了子元素當中(調皮的由item換成了一個self).
展示效果:
方法三如果在一段塊元素包裹的行內元素中有某個元素比較特殊, 比如: 大寫加粗的文字 、 亂入的圖片圖標, 垂直居中:
該元素設置 { vertical-align: middle; }
/* 同時對應 text-bottom/text-top 為下對齊/上對齊 */
兼容性:
//xxx(請原諒我不想提他的名字), 竟然支持到了4.0 驚艷到我了
展示效果:
方法四父元素相對定位(或其他定位){ position: relative; }
子元素絕對定位{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto }
關鍵點在于: margin: auto
兼容性方面, 我稍有疑問,
top為例:
而position:
那么請問: 5.0~6.9999999之間top等元素做了什么?(歡迎大(lao)神(niao)解答 /壞笑)
展示效果:
方法五父元素設置{ padding: xxpx; height: auto !important;/*替換了我的默認樣式*/ }
當有高度不固定的內容時.
兼容性:
展示效果:
方法六line-height/height設置為等值
適用于子元素為內聯元素或文字的塊元素.
兼容性:
展示效果:
方法七父元素設置{ display: table-cell; vertical-align: middle; }
/* 缺點元素寬度不能設置為百分比, 可以為固定像素值 */
兼容性:
展示效果:
方法八父元素設置{ position: relative; }
中間元素{ position: absolute; top: 50%; left: 50%; }
子元素{ position: relative; top: -50%; left: -50% }
原理是, 中間元素左上角, 位于父元素中心點, 子元素相對中間元素top/left位移-50%, 使子元素中心與中間元素左上角重合, 同時與父元素中心重合( 垂直/水平居中 ).
兼容性:(同方法四)
展示效果:
方法九父元素設置{ display: box; box-pack: center; box-align: center; }
其中box-pack為x軸, box-align為y軸.
兼容性(完(pou)美(gai)):
目前主流瀏覽器都不支持box-pack屬性。 Internet Explorer 10 使用 -ms-flex-pack property 屬性來代替支持。 Firefox通過私有屬性- MOZ-box-pack支持。 Safari, Opera, 和 Chrome 通過私有屬性 -webkit-box-pack 支持. 注意： Internet Explorer 9及更早IE版本不支持彈性框.
展示效果:
方法十父元素設置{ position: relative; }
子元素設置{ position: absolute; top: 50%; left: 50%; transform: translate: (-50%, 50%) }
與方法八有異曲同工之妙, 但是是運用了css3的屬性 transform.
兼容性:
展示效果:
可能還會有其他方法, 歡迎補充.
出發點:
想起來一次面試的時候, 第一題貌似就是這個,
好像見過很多次, 如果你能列出來5種, 8種, 10種甚至更多, 面試官會不會嚇死?
希望試過的同學記得告訴我結果... ( 純屬扯淡, 如有雷同, 就是事實. )
聲明: 點下推薦不會懷孕.
以上.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116469.html
摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...
摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...
摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...
摘要：下面的會造成這種樣子的垂直居中因此，如果有一個方塊變成了高度，那么其他的方塊就會真正的垂直居中。使用使用或的屬性，輕輕松松就可以做到垂直居中的效果。 我們在編輯一個版面，通常都會用到水平居中和垂直居中來設計，而水平居中很好處理，不外乎就是設定margin:0 auto；或是text-align:center；，就可以輕松解決掉水平居中的問題，但一直以來最麻煩對齊問題，都是垂直居中這個討...
閱讀 3938·2021-10-09 09:43
閱讀 2870·2021-10-08 10:05
閱讀 2734·2021-09-08 10:44
閱讀 882·2019-08-30 15:52
閱讀 2809·2019-08-26 17:01
閱讀 3015·2019-08-26 13:54
閱讀 1649·2019-08-26 10:48
閱讀 807·2019-08-23 14:41
