css 垂直居中

css 居中 網上很多很多般甲。
這里三個方法,只是我覺得容易理解的墓造。

方法一:負邊距

<div class="middle"></div>
.middle{    
  /*必須要有寬高*/    
  width: 100px;    
  height: 100px;    
  background-color: red;    
  /*絕對定位*/    
  position: absolute;    
  /*增對左頂點居中觅闽,整體不居中*/    
  left:50%;    
  top:50%;    
  /*用margin使得整體得到居中*/    
  margin-left: -50px;    
  margin-top: -50px;}

總結:對有固定寬高的元素較為使用涮俄,以左上角點進行居中,然后進行margin處理彻亲,使得整體居中。

方法二:margin:auto;

<div class="middle"></div>
.middle{    
/*必須要有寬高*/    
width: 100px;    
height: 100px;    
background-color: red;    
 /*關鍵點*/  
margin:auto;    
/*絕對定位*/   
position: absolute;    
top:0;    
left:0;    
bottom:0;    
right:0;

參考資料:http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
然并卵,作者最后也沒解釋原理=-=茧痕。這里我也不是很理解恼除,只知道這種布局方式的關鍵點是<code>margin:auto</code>。

方法三:table
看了半天令野,好像一定要指定一個父元素徽级,然后基于這個父元素做垂直居中,待我仔細研究研究现使。

很多方法旷痕,不敢寫,因為自己不是怎么理解售碳。等以后慢慢添绞呈。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末佃声,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子秉溉,更是在濱河造成了極大的恐慌召嘶,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件甲喝,死亡現(xiàn)場離奇詭異铛只,居然都是意外死亡糠溜,警方通過查閱死者的電腦和手機直撤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門谋竖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蓖乘,“玉大人,你說我怎么就攤上這事嘉抒。” “怎么了隶症?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵沿腰,是天一觀的道長狈定。 經常有香客問我习蓬,道長,這世上最難降的妖魔是什么芦缰? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任让蕾,我火速辦了婚禮或听,結果婚禮上,老公的妹妹穿的比我還像新娘顿颅。我一直安慰自己足丢,他們只是感情好庇配,可當我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布捞慌。 她就那樣靜靜地躺著柬批,像睡著了一般。 火紅的嫁衣襯著肌膚如雪萝快。 梳的紋絲不亂的頭發(fā)上揪漩,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天,我揣著相機與錄音冰更,去河邊找鬼昂勒。 笑死,一個胖子當著我的面吹牛奠衔,可吹牛的內容都是我干的。 我是一名探鬼主播塘娶,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼归斤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刁岸?” 一聲冷哼從身側響起脏里,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎虹曙,沒想到半個月后迫横,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡酝碳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年矾踱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片击敌。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出圣蝎,到底是詐尸還是另有隱情刃宵,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布徘公,位于F島的核電站牲证,受9級特大地震影響,放射性物質發(fā)生泄漏关面。R本人自食惡果不足惜坦袍,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望等太。 院中可真熱鬧捂齐,春花似錦、人聲如沸缩抡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瞻想。三九已至压真,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蘑险,已是汗流浹背滴肿。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留佃迄,地道東北人泼差。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像和屎,于是被迫代替她去往敵國和親拴驮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內容

  • 44年前我們就把人類送上月球了柴信,但現(xiàn)在我們仍然無法在CSS中實現(xiàn)垂直居中。 在CSS中對元素進行水平居中是非常簡單...
    康斌閱讀 15,840評論 9 28
  • 標簽:css-常用技巧 table-cell 式將 center 元素的父容器設置為 display:table,...
    練曉習閱讀 522評論 0 1
  • CSS實現(xiàn)垂直居中在網頁布局中是經常會用到的宽气,所以一定要牢記這些方法以應對之随常,寫下這篇文章也是為了鞏固自己的知識點...
    大春春閱讀 1,214評論 0 2
  • 前言 CSS居中一直是一個比較敏感的話題,為了以后開發(fā)的方便萄涯,樓主覺得確實需要總結一下了绪氛,總的來說,居中問題分為垂...
    秦至閱讀 741評論 1 2
  • 最近不知道怎么回事涝影,心理總是很焦灼枣察,是一種懶洋洋的狀態(tài),不想動,不想說話序目,不想做事臂痕,甚至心理有些抑郁。我也不知道是...
    噯寧閱讀 228評論 0 0