方法1: text-aligin:center+ vertical-align:middle
條件: 父容器display: table-cell,子元素display不限制涛酗;
圣杯布局
居中:
居中分為兩種情況:
- 行內(nèi)元素的居中
- 塊級(jí)元素居中
- 定寬的塊級(jí)元素居中
- 不定寬的塊級(jí)元素居中
行內(nèi)元素的居中
文字或者img等行內(nèi)元素的居中续滋,可以使用<text-align>
屬性,它用來定義行內(nèi)元素如何相對(duì)于它的塊父元素對(duì)齊饥瓷,text-align不控制塊父元素自身的對(duì)齊伙狐,只控制它的行內(nèi)內(nèi)容的對(duì)齊方式涮毫。
demo1
注意事項(xiàng):
- 由于行內(nèi)元素不換行的特點(diǎn),所以父級(jí)塊元素有多個(gè)子元素時(shí)(特別是一個(gè)文字贷屎,一個(gè)圖片時(shí))罢防,看起來并不居中。
demo2 - text-align具有繼承性質(zhì)唉侄,所以當(dāng)父級(jí)元素里面有一個(gè)塊元素咒吐,且該塊元素未設(shè)置寬度時(shí),開起來就像該塊元素實(shí)現(xiàn)了居中属划,然而當(dāng)我們給該塊級(jí)元素設(shè)置了寬度后恬叹,就會(huì)發(fā)現(xiàn)它無法實(shí)現(xiàn)相對(duì)于父元素的居中。
demo3
塊級(jí)元素的居中 - 確定寬度
margin: 0 auto;