對css居中的一點(diǎn)思考

在學(xué)習(xí)前端的過程中,發(fā)現(xiàn)元素和文本的水平居中和垂直居中叮阅,是經(jīng)常會(huì)出現(xiàn)的問題刁品,在實(shí)際工作中也會(huì)經(jīng)常碰到。居中的技巧有很多浩姥,原以為自己掌握了這些技巧就行了挑随,但在編寫代碼的過程中,發(fā)現(xiàn)有時(shí)候技巧管用勒叠,有時(shí)候不管用兜挨,于是就將每個(gè)知道的方案都試一遍,找到合適的眯分。這種情況究其原因是對居中的認(rèn)識不夠深入拌汇,只是停留在實(shí)現(xiàn)需求的水平上。為了更好的加深對居中的理解弊决,搜集和閱讀相關(guān)資料噪舀,并將所得總結(jié)在此。

居中是什么

居中故名思意就是將物體放置在其容器的中間飘诗,在css中居中就是指元素与倡、文本、圖片等相對其容器或父元素或?yàn)g覽器窗口能夠居中顯示昆稿。而根據(jù)顯示方式的不同纺座,又分為水平居中,垂直居中,水平垂直居中。下面就分情況對居中進(jìn)行討論浪规。

水平居中

水平居中我們常見的一種解決方案就是設(shè)置text-align:center衬衬,然而我們會(huì)發(fā)現(xiàn)這種方式有時(shí)候有效,有時(shí)候卻沒有效果。這是因?yàn)槲覀冊谑褂孟嚓P(guān)方法的時(shí)候并沒有對塊級元素和行內(nèi)元素進(jìn)行區(qū)分,不同類型的元素其居中方法是不同的:

當(dāng)元素為行內(nèi)元素時(shí)(如文本,鏈接)

當(dāng)需要居中的元素為行內(nèi)元素時(shí)掸掸,你可以通過在其父元素(必須是塊級元素)設(shè)置如下css樣式:

.parent {
     text-align:center;
}

示例代碼
這種方法對display設(shè)置為inline、inline-block、inline-table扰付、inline-flex的元素都有效堤撵。

塊級元素居中

對于一個(gè)塊級元素你可以通過設(shè)置其margin屬性,來達(dá)到水平居中的效果羽莺。你可以將其margin-left和margin-right設(shè)置為auto:

.center{
    margin:0 auto;
}

這樣瀏覽器就會(huì)根據(jù)元素的寬度自動(dòng)為元素左右兩邊設(shè)定等寬的margin实昨,來達(dá)到水平居中的效果。這里需要注意的是元素需要設(shè)定width屬性盐固,否則元素的寬度會(huì)自動(dòng)充滿父元素荒给,就不存在相對父元素水平居中一說了。
示例代碼
這里需要注意的是這種方法對設(shè)置float屬性的塊級元素是沒有效果的刁卜,浮動(dòng)元素的居中這里有一個(gè)解決方案志电,但是該方法的布局比較混亂,子元素脫出父元素蛔趴,并不推薦挑辆。
另外有一個(gè)tricks,能夠?qū)崿F(xiàn)如下圖中

文字環(huán)繞圖片居中的效果孝情,具體參見這篇文章鱼蝉。

當(dāng)有多個(gè)塊級元素時(shí)

當(dāng)你需要對多個(gè)塊級元素進(jìn)行居中顯示時(shí),如果塊級元素如下垂直排列:

vertical.png
vertical.png
箫荡,那么簡單的設(shè)置margin:0 auto;就可以輕松實(shí)現(xiàn)魁亦。
但如果如下排列:
horizontal.png
horizontal.png

那么就可以使用display:inline-block將多個(gè)塊元素單行顯示,同時(shí)由于inline的緣故羔挡,可以在父元素設(shè)置text-align:center將多個(gè)塊元素居中吉挣,當(dāng)然也可以將元素設(shè)置為display:flex; justify-content: center;達(dá)到居中效果。詳細(xì)代碼示例

垂直居中

垂直居中相比于水平居中婉弹,就復(fù)雜一些,還是分塊級與行內(nèi)進(jìn)行討論终吼。

inline或inline-block元素

單行垂直居中的情況

當(dāng)父元素沒有設(shè)定寬度镀赌,而是根據(jù)內(nèi)容自適應(yīng)時(shí),簡單的設(shè)置padding就可以達(dá)到垂直居中的效果际跪,如:

css:
.p{ border: 1px solid yellow;padding: 80px;}
.p a{
            background-color: black;
            color: white;
            border: 2px solid red;
            padding: 30px;  /*相同的上下內(nèi)距實(shí)現(xiàn)垂直居中*/
        }
html:
<div class="p">
        <a href="#">asldkjflkadfk</a>
</div>

在某些情況下設(shè)置padding并不能滿足需求商佛,而你又需要將一段單行顯示的文本居中,這時(shí)你可以將line-height和height屬性設(shè)置為等高來達(dá)到目的:

html:
<main><div>I'm a centered line.</div></main>
css:
main {
  background: white;
  margin: 20px 0;
  padding: 40px;
}
main div {
  background: black;
  color: white;
  height: 100px;   /*行高與line-height相同*/
  line-height: 100px;
  padding: 20px;
  width: 50%;
  white-space: nowrap;
}

示例代碼
關(guān)于line-height姆打,有許多需要了解和注意的地方良姆,想詳細(xì)了解為什么這么這種方法可以實(shí)現(xiàn)垂直居中,可以參見這篇文章

多行垂直居中

設(shè)置padding同樣可以使多行文本居中幔戏,但有時(shí)當(dāng)文本出現(xiàn)在表格單元格里或其他情況也會(huì)使該方法無效玛追。這時(shí)會(huì)用到vertical-align屬性,
示例代碼
更多關(guān)于vertical—align的信息,可以點(diǎn)擊這里這篇
需要指出的是只有一個(gè)元素屬于inline或是inline-block(table-cell也可以理解為inline-block水平)水平痊剖,其身上的vertical-align屬性才會(huì)起作用

如果table—like不行韩玩,也許你可以試一下flex-parent, 一個(gè)flex-child可以很輕易的在flex-parent里垂直居中:

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

示例代碼
需要注意的是父容器必須有一個(gè)固定的高度。
如果上述2中方法都不可行陆馁,你就需要借助偽元素找颓,也就是在父容器里添加一個(gè)高度占滿整個(gè)父元素的偽元素,文本就居中顯示在里面叮贩。

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

完整示例

塊級元素垂直居中

當(dāng)你知道元素的高度時(shí)

如果你知道元素的高度击狮,那么你可以這樣實(shí)現(xiàn)垂直居中:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */  /*這里可以使用transform:translate(-50%)實(shí)現(xiàn)同樣的效果*/
}

上述代碼是通過定位的方式,來實(shí)現(xiàn)垂直居中益老,子元素參照父元素進(jìn)行絕對定位彪蓬,相對于父元素的上邊緣向下移動(dòng)50%(父元素高度的50%),然后通過margin-top元素將子元素向上拉自身的50%杨箭,達(dá)到最終的居中寞焙。
完整示例代碼

當(dāng)元素的高度未知時(shí)

當(dāng)元素高度未知時(shí)可以如下,本質(zhì)原理與上述相似:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

完整代碼

使用flexbox

使用flexbox無疑是種簡單有效的解決方案:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

完整代碼

既水平居中又垂直居中

你可以將上述方法進(jìn)行合理的組合互婿,來達(dá)到水平垂直居中捣郊,總結(jié)一下,可分為如下三種情況:

元素是否具有固定的寬高

在通過將元素定位50%/50%后慈参,再設(shè)置一個(gè)高度和寬度一半大小的負(fù)值給 margin呛牲,能夠很好的居中,并且支持大多數(shù)瀏覽器:

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

完整代碼

當(dāng)寬高未知時(shí)

當(dāng)你不知道寬高時(shí)驮配,你可以使用transform屬性娘扩,設(shè)置translate(-50%),這里的50%是相對與元素本身的寬高壮锻。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

完整代碼

使用flexbox

想要水平垂直居中琐旁,你需要設(shè)置兩個(gè)居中屬性

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

完整代碼

原文鏈接:
https://css-tricks.com/centering-css-complete-guide/

相關(guān)文章:
https://css-tricks.com/float-center/

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

居中代碼生成工具:http://howtocenterincss.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市猜绣,隨后出現(xiàn)的幾起案子灰殴,更是在濱河造成了極大的恐慌,老刑警劉巖掰邢,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牺陶,死亡現(xiàn)場離奇詭異,居然都是意外死亡辣之,警方通過查閱死者的電腦和手機(jī)掰伸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來怀估,“玉大人狮鸭,你說我怎么就攤上這事合搅。” “怎么了怕篷?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵历筝,是天一觀的道長。 經(jīng)常有香客問我廊谓,道長梳猪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任蒸痹,我火速辦了婚禮春弥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘叠荠。我一直安慰自己匿沛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布榛鼎。 她就那樣靜靜地躺著逃呼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪者娱。 梳的紋絲不亂的頭發(fā)上抡笼,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機(jī)與錄音黄鳍,去河邊找鬼推姻。 笑死,一個(gè)胖子當(dāng)著我的面吹牛框沟,可吹牛的內(nèi)容都是我干的藏古。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼忍燥,長吁一口氣:“原來是場噩夢啊……” “哼拧晕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起梅垄,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤厂捞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后哎甲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡饲嗽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年炭玫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片貌虾。...
    茶點(diǎn)故事閱讀 39,785評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡吞加,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情衔憨,我是刑警寧澤叶圃,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站践图,受9級特大地震影響掺冠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜码党,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一德崭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧揖盘,春花似錦眉厨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至箕慧,卻和暖如春服球,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背销钝。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工有咨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蒸健。 一個(gè)月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓座享,卻偏偏與公主長得像,于是被迫代替她去往敵國和親似忧。 傳聞我的和親對象是個(gè)殘疾皇子渣叛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評論 1 92
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,179評論 3 30
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中盯捌,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 939評論 0 1
  • 本文主要是起筆記的作用淳衙,內(nèi)容來自慕課網(wǎng). 認(rèn)識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,641評論 0 30
  • 事業(yè)并不等于生活。他們是兩個(gè)獨(dú)立的概念饺著。 事業(yè)箫攀,能否在這個(gè)世界生存下去,取決于它是否能夠發(fā)揮自身的核心職能:找到并...
    愛一茶江泳閱讀 803評論 0 1