css-垂直居中

- 居中vs不居中

代碼

- 絕對(duì)定位實(shí)現(xiàn)居中

代碼

高度,寬度不固定的話無(wú)法使用該方法,css3可在該需要居中的div里加上transform:translate(-50%,-50%)

- 使用vertical-align實(shí)現(xiàn)居中

代碼
vertical-align: middle:作用在行內(nèi)元素和表格,進(jìn)行基線對(duì)齊

- table-cell實(shí)現(xiàn)居中

代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子谍夭,更是在濱河造成了極大的恐慌横媚,老刑警劉巖熟丸,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件是钥,死亡現(xiàn)場(chǎng)離奇詭異讥巡,居然都是意外死亡老翘,警方通過(guò)查閱死者的電腦和手機(jī)芹啥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)酪捡,“玉大人叁征,你說(shuō)我怎么就攤上這事」滢保” “怎么了捺疼?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)永罚。 經(jīng)常有香客問(wèn)我啤呼,道長(zhǎng)卧秘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任官扣,我火速辦了婚禮翅敌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘惕蹄。我一直安慰自己蚯涮,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布卖陵。 她就那樣靜靜地躺著遭顶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泪蔫。 梳的紋絲不亂的頭發(fā)上棒旗,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音撩荣,去河邊找鬼铣揉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛餐曹,可吹牛的內(nèi)容都是我干的逛拱。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼凸主,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼橘券!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起卿吐,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤旁舰,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后嗡官,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體箭窜,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年衍腥,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了磺樱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡婆咸,死狀恐怖竹捉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情尚骄,我是刑警寧澤块差,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響憨闰,放射性物質(zhì)發(fā)生泄漏状蜗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一鹉动、第九天 我趴在偏房一處隱蔽的房頂上張望轧坎。 院中可真熱鬧,春花似錦泽示、人聲如沸缸血。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)属百。三九已至,卻和暖如春变姨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背厌丑。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工定欧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人怒竿。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓砍鸠,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親耕驰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子爷辱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

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

  • 垂直居中有幾種實(shí)現(xiàn)方式 父元素上下padding設(shè)置成一樣大小代碼2.絕對(duì)定位position: absolute...
    饑人谷_wanpp閱讀 618評(píng)論 0 47
  • 使用絕對(duì)定位和負(fù)外邊距對(duì)塊級(jí)元素進(jìn)行垂直居中 html代碼: css代碼: 運(yùn)行結(jié)果如下: 這個(gè)方法兼容性不錯(cuò),但...
    深沉的簡(jiǎn)單閱讀 267評(píng)論 0 2
  • 前言 CSS居中一直是一個(gè)比較敏感的話題朦肘,為了以后開發(fā)的方便饭弓,樓主覺(jué)得確實(shí)需要總結(jié)一下了,總的來(lái)說(shuō)媒抠,居中問(wèn)題分為垂...
    秦至閱讀 738評(píng)論 1 2
  • 標(biāo)簽:css-常用技巧 table-cell 式將 center 元素的父容器設(shè)置為 display:table,...
    練曉習(xí)閱讀 517評(píng)論 0 1
  • 垂直居中一直是CSS布局中比較令人頭疼的問(wèn)題弟断,相比于水平居中,垂直居中對(duì)于不同的元素類型需要采取截然不同的策略趴生,因...
    文風(fēng)Yu閱讀 55,560評(píng)論 2 8