摘要:寫在前面很多時(shí)候我們需要水平居中時(shí)候用但我們要知道,這個(gè)方法有很大的局限性,它不能對(duì)浮動(dòng)元素和絕對(duì)定位元素居中,而且對(duì)于其他元素必須在有屬性時(shí)才有作用。
寫在前面:很多時(shí)候我們需要水平居中時(shí)候用margin: 0 auto;但我們要知道,這個(gè)方法有很大的局限性,它不能對(duì)浮動(dòng)元素和絕對(duì)定位元素居中,而且對(duì)于其他元素必須在有width屬性時(shí)才有作用。
這里說(shuō)的居中是水平豎直同時(shí)居中,就像下面圖中這樣,而且我們居中的時(shí)元素而不是內(nèi)容。(以下所有方法的結(jié)果和下圖一樣,不再附圖)
以下方法如果沒有特殊說(shuō)明,都是基于下面這個(gè)部分:
#parent{ height: 200px; width: 300px; border: 1px solid #000; } #demo{ height: 100px; width: 60px; background: blue; }行內(nèi)元素居中(單行)
#parent{ text-align: center; } #demo{ display: inline-block; line-height: 200px; /* 等于父元素高度 */ }Hello
這里應(yīng)注意,text-align在IE8及以上和其他主流瀏覽器只能對(duì)行內(nèi)元素居中,但在IE6和IE7中可以對(duì)任何元素居中。
利用position定位 知道子元素和父元素大小方法一
#parent{ position: relative; } #demo{ position: absolute; top: 50px; /* 計(jì)算方法: (父元素高度-子元素高度)/2 */ left:120px; /* 計(jì)算方法: (父元素寬度-子元素寬度)/2 */ }
方法二
#parent{ position: relative; } #demo{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }僅知道子元素大小
#parent{ position: relative; } #demo{ position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 子元素高度的一半 */ margin-left: -30px; /* 子元素寬度的一半 */ }僅知道父元素大小
#parent{ position: relative; } #demo{ position: absolute; top: 100px; /* 父元素高度的一半 */ left: 150px; /* 父元素高度的一半 */ transform: translateX(-50%) translateY(-50%); }父元素和子元素大小都不知道
#parent{ position: relative; } #demo{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }利用table居中
#parent{ text-align: center; } #demo{ display: inline-block; }
#parent{ display:table-cell; text-align: center; vertical-align: middle; } #demo{ display: inline-block; }display:flex
#parent{ justify-content:center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
還有一種用font-size屬性的居中對(duì)齊方式,由于只能在IE6,IE7中實(shí)現(xiàn)。這里就把它忽略了。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113874.html
摘要:但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...
摘要:但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...
摘要:前言在我看來(lái),入門的路上最煩人的就是的各種居中了。在我初學(xué)過程中,居中這個(gè)問題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語(yǔ)以上的方法基本上可以用完成各種情況的居中。 前言 在我看來(lái),入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中,居中這個(gè)問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢? 我認(rèn)為,這是因?yàn)镃SS的居中方法以及它的適...
摘要:居中分為水平居中和垂直居中,水平居中方式也較為常見和統(tǒng)一,垂直居中的方法就千奇百怪了。若把最后一行加上,即可同時(shí)實(shí)現(xiàn)水平和垂直居中。 博客原文地址:Claiyre的個(gè)人博客 https://claiyre.github.io/如需轉(zhuǎn)載,請(qǐng)?jiān)谖恼麻_頭注明原文地址不為繁華易匠心 從css入門就開始接觸,無(wú)所不在的,一直備受爭(zhēng)議的居中問題。css居中分為水平居中和垂直居中,水平居中方式也較為...
閱讀 2722·2021-11-11 17:21
閱讀 613·2021-09-23 11:22
閱讀 3577·2019-08-30 15:55
閱讀 1640·2019-08-29 17:15
閱讀 573·2019-08-29 16:38
閱讀 904·2019-08-26 11:54
閱讀 2503·2019-08-26 11:53
閱讀 2749·2019-08-26 10:31