内蒙古时时彩开奖直播

Redirecting

一起搞懂 CSS 水平居中與垂直居中的16個方法

505次 2019-03-19 zleader

一、水平居中
1.1 行內元素
.parent {
    text-align: center;
}
1.2 塊級元素
1.2.1 塊級元素一般居中方法
.son {
    margin: 0 auto;
}?
1.2.2 子元素含 float
.parent{
    width:fit-content;
    margin:0 auto;
}
.son {
    float: left;
}
1.2.3 Flex 彈性盒子
1) flex 2012版
.son {
    display: flex;
    justify-content: center;
}
2)flex 2009版
.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
}
1.2.4 絕對定位
1)transform
.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
2)left: 50%
.son {
    postion: absolute;
    width: 寬度;
    left: 50%;
    margin-left: -0.5*寬度
}
3)left/right: 0
.son {
    position: absolute;
    width: 寬度;
    left: 0;
    right: 0;
    margin: 0 auto;
}
小結
以上是 CSS 水平居中的 8 種方法。
二、垂直居中
2.1 行內元素
.parent {
    height: 高度;
}
.son {
    line-height: 高度;
}
注:① 子元素 line-height 值為父元素 height 值。② 單行文本。
2.2 塊級元素
2.2.1 行內塊級元素
.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}
習慣 IE7。
2.2.2 table
.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
利益
元素高度能夠動態改動, 不需再CSS中界說, 假設父元素沒有滿意空間時, 該元素內容也不會被堵截。
缺點
IE6~7, 甚至IE8 beta中無效。
2.2.3 Flex 彈性盒子
1)flex 2012版
.parent {
    display: flex;
    align-items: center;
}
利益
內容塊的寬高任意, 高雅的溢出。
可用于更雜亂高級的布局技術中。
缺點
IE8/IE9不支持。
需求瀏覽器廠商前綴。
烘托上或許會有一些問題。
2)flex 2009版
.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}
利益
完結簡略, 擴展性強。
缺點
兼容性差, 不支持IE。
2.2.4 肯定定位
1)transform
.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}
利益
代碼少。
缺點
IE8不支持, 特點需求追加瀏覽器廠商前綴, 或許干擾其他 transform 作用, 某些現象下會出現文本或元素鴻溝烘托含糊的現象。
2)top: 50%
.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}
利益
適用于全部瀏覽器。
缺點
父元素空間不行時, 子元素或許不行見(當瀏覽器窗口縮小時,滾動條不出現時).假設子元素設置了overflow:auto, 則高度不行時, 會出現滾動條。
3)top/bottom: 0;
.son {
    position: absolute;
    top: 0;
    botton: 0;
    margin: auto 0;
}

css

推薦閱讀

  • 基礎科普!超全面的 UI 元素尺寸設置指南(上)

    基礎科普!超全面的 UI 元素尺寸設置指南(上)

    開始著手設計手機界面時,困擾著新人的除了不知道應該在界面中放什么以外,最突出的就是不知道元素應該使用的長寬數值,也是學生問得最多的問題,所以著手整理2篇文章做掃盲,一次性搞明白,在手機的界面中如何設置元素的尺寸。

  • 我是如何將頁面加載時間從6S降到2S的?

    我是如何將頁面加載時間從6S降到2S的?

    網站設計的再優秀,功能再完美,但是響應的巨慢,用戶的耐心很快會被耗光,這可能成為他最后一次訪問,這絕對不是危言聳聽,最近有幸參與到了公司海外站點項目,對于這點深有體會。

  • 百度網盤品牌升級背后的故事

    百度網盤品牌升級背后的故事

    百度網盤是百度提供的個人云存儲服務,自2013年上線至今,通過強大的技術能力以及承擔高額的帶寬成本,為7億用戶提供文件存儲、備份、分享、共享等服務,成為行業領先位置。 這5年里,我們從滿足基礎存儲需求的一款工具,到現在越來越意識到高品質和情感化的體驗對于用戶的重要性。

竹鹿產品經理為您的項目進行一對一的策劃及方案

懂設計,懂技術,更懂服務

立即溝通稍后再說

高端品牌網站 / 微信小程序 / 門戶與平臺開發 / OA協同辦公 / 大數據 / VI與包裝

内蒙古时时彩开奖直播 时时缩水app 后一5码倍投计划表 四川时时网站 猫咪现在的网址是什么啊 pk10高手交流8197771 金吊桶论坛马会 百人棋牌 澳洲橄榄球比分 网上说可以追回黑平台的钱 云尚娱乐app