CSS 水平居中

零散的知識不整理進入自己的知識框架太容易忘机隙,對于CSS腦子里零零散散的圣猎!整理自勉禀梳!

水平居中

塊級元素水平居中

margin:auto

此居中的方法前提為居中塊級元素寬度必須固定才可設(shè)置auto自動計算左右補白

   .block1{
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2{
        height: 100px;
        width: 100px;
        margin: auto;
        background: red;
    }
 <div class="block1">
    <div class="block2"></div>
 </div>

image.png

可見塊2的margin-left,margin-right設(shè)置為auto后實現(xiàn)水平居中浓冒,但是margin-top,margin-bottom設(shè)置為auto確并不能垂直居中衙吩!
特點:瀏覽器兼容性強,但擴展性差芥备,無法自適應(yīng)未知項情況

text-align:center

text-align 屬性規(guī)定元素中的文本的水平對齊方式冬耿!顯然不是用來給塊級元素水平居中的,不過可設(shè)置塊級元素為行內(nèi)塊級元素時便可實現(xiàn)水平居中

 .block1 {
        height: 300px;
        width: 600px;
        background: black;
        text-align: center;
    }
    
    .block2 {
        height: 100px;
        display: inline-block;
        background: red;
    }
<div class="block1">
    <div class="block2">11111111111</div>
</div>
image.png

特點:擴展性強门躯,但需要額外處理inline-block的瀏覽器兼容性
注:該種方法可以讓display為inline/inline-block/inline-table/inline/flex值的子元素居中

position:absolute

通過設(shè)置子元素為絕對定位元素還有l(wèi)eft和margin-left的值可以達(dá)到居中效果

 .block1 {
        height: 300px;
        width: 600px;
        position: relative;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background: red;
    }
 <div class="block1">
    <div class="block2"></div>
 </div>
image.png

特點: 必須知道子元素的寬度才能設(shè)置左邊補白的負(fù)值
注:網(wǎng)上有說法可以通過和float來實現(xiàn)不定寬度塊級元素居中(還未深究)

CSS3 flex實現(xiàn)水平居中方法

Flex主要用來布局淆党! Flex布局,可以簡便讶凉、完整、響應(yīng)式地實現(xiàn)各種頁面布局山孔。后面整理flex布局筆記懂讯!

  .block1 {
        height: 300px;
        width: 600px;
        display: flex;
        justify-content: center;
        background: black;
    }
    
    .block2 {
        height: 100px;
        background: red;
    }
  <div class="block1">
    <div class="block2">1123123</div>
 </div>
image.png

特點:實現(xiàn)便捷,擴展性強但兼容需要考慮

CSS3 width:fit-content

width:fit-content可以實現(xiàn)元素收縮效果的同時台颠,保持原本的block水平狀態(tài)褐望,于是,就可以直接使用margin:auto實現(xiàn)元素向內(nèi)自適應(yīng)同時的居中效果了

  .block1 {
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        background: red;
    }
 <div class="block1">
    <div class="block2">1123123</div>
 </div>
image.png

特點:擴展性強串前,但兼容性差;

float

浮動居中有待好好研究瘫里!
特點:兼容性強,擴展性強荡碾!但實現(xiàn)原理較復(fù)雜

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谨读,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子坛吁,更是在濱河造成了極大的恐慌劳殖,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拨脉,死亡現(xiàn)場離奇詭異哆姻,居然都是意外死亡,警方通過查閱死者的電腦和手機玫膀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門矛缨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事箕昭∮颍” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵盟广,是天一觀的道長闷串。 經(jīng)常有香客問我,道長筋量,這世上最難降的妖魔是什么烹吵? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮桨武,結(jié)果婚禮上肋拔,老公的妹妹穿的比我還像新娘。我一直安慰自己呀酸,他們只是感情好凉蜂,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著性誉,像睡著了一般窿吩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上错览,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天纫雁,我揣著相機與錄音,去河邊找鬼倾哺。 笑死轧邪,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的羞海。 我是一名探鬼主播忌愚,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼却邓!你這毒婦竟也來了硕糊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤申尤,失蹤者是張志新(化名)和其女友劉穎癌幕,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昧穿,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡勺远,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了时鸵。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胶逢。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡厅瞎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出初坠,到底是詐尸還是另有隱情和簸,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布碟刺,位于F島的核電站锁保,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏半沽。R本人自食惡果不足惜爽柒,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望者填。 院中可真熱鬧浩村,春花似錦、人聲如沸占哟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽榨乎。三九已至怎燥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間谬哀,已是汗流浹背刺覆。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留史煎,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓驳糯,卻偏偏與公主長得像篇梭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子酝枢,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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