摘要:第一種定位注意兼容性較好,缺點不支持以下的瀏覽器第二種定位注意兼容性好缺點必須知道元素的寬高第三種定位注意這是里的樣式缺點兼容性不好,只支持的瀏覽器第四種彈性盒子移動端首選第五種移動端首選第六種形成子元素設置
html:
green
第一種:定位+margin:auto
.container { position: relative; width: 300px; height: 300px; background: yellow; } .box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background: red; }
注意:兼容性較好,缺點:不支持IE7以下的瀏覽器
第二種:定位+margin-left+margin-top
.container { position: relative; width: 300px; height: 300px; background: yellow; } .box { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; background: red; }
注意:兼容性好;缺點:必須知道元素的寬高
第三種:定位+transfrom
.container { position: relative; width: 300px; height: 300px; background: yellow; } .box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; background: red; }
注意:這是css3里的樣式;缺點:兼容性不好,只支持IE9+的瀏覽器
第四種:彈性盒子
.container { display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; background: yellow; } .box { width: 100px; height: 100px; background: red; }
移動端首選
第五種:flex+margin: auto
.container { display: flex; width: 300px; height: 300px; background: yellow; } .box { margin: auto; width: 100px; height: 100px; background: red; }
移動端首選
第六種:形成table-cell,子元素設置display:inline-block
.container { display: table-cell; vertical-align: middle; text-align: center; width: 300px; height: 300px; background: yellow; } .box { display: inline-block; width: 100px; height: 100px; background: red; }
注意:兼容性:由于display:table-cell的原因,IE67不兼容
第七種:line-height+display:inline
.container { width: 300px; height: 300px; line-height: 300px; text-align: center; background: yellow; } .box { display: inline; background: red; }
職場小白south Joe,望各位大神批評指正,祝大家學習愉快!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116077.html
摘要:第一種定位注意兼容性較好,缺點不支持以下的瀏覽器第二種定位注意兼容性好缺點必須知道元素的寬高第三種定位注意這是里的樣式缺點兼容性不好,只支持的瀏覽器第四種彈性盒子移動端首選第五種移動端首選第六種形成子元素設置 html: green 第一種:定位+margin:auto .container { position: relative;...
摘要:結構如下實驗結果如下實現了子元素的水平垂直居中,同時可觀察到兩張圖溢出的方式不同絕對定位的溢出或或的溢出 1.絕對定位,利用負邊距 利用負邊距實現子元素居中(相對于父元素(position:relative)),需已知子元素的width與height;且把子元素的position設為absolute,絕對定位;以及設置left和top為50%;再加上負邊距,margin-left值為w...
摘要:前言布局中經常會遇到元素水平居中的需求今天根據以前的學習筆記以及看過的一些技術博客做個元素水平居中的小結。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。 前言 布局中經常會遇到元素水平居中的需求,今天根據以前的學習筆記?以及看過的一些技術博客做個元素水平居中的小結。 正文 圖片的水平垂直居中 //圖片地址為http://static.jsbin.com/ima...
摘要:水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等,從而使元素垂直居中。 簡言 CSS居中是前端工程師經常要面對的問題,也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15種。...
閱讀 2570·2021-09-06 15:02
閱讀 3199·2021-09-02 10:18
閱讀 2820·2019-08-30 15:44
閱讀 685·2019-08-30 15:43
閱讀 1948·2019-08-30 14:08
閱讀 2758·2019-08-30 13:16
閱讀 1397·2019-08-26 13:52
閱讀 930·2019-08-26 12:21