iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 9

[CSS] 元素置中的 N 個方法

昨晚在電腦前莫名其妙被周公抓走,還好趕在灰姑娘的午夜 12 點前魂魄歸來、踩線發文,看來這幾天的文都在敘述概念(Git / HTML)……實在太催眠了。
為防又不小心被周公抓去太久而在昏迷中斷賽(為什麼不提早發!!),決定不照目錄寫作了(真是個任性的傢伙R)!
接下來直接來寫實用的範例吧!畢竟已經寫到快第 10 篇,還沒寫幾行 code ,甘那母湯~


題目定義:使元素水平/垂直居中

元素置中是調控 CSS 時必然會遇到的問題,也是 Junior 前端工程師面試的熱門考題。
這篇列出常見的置中方式,設定題目條件:

  1. 讓子元素水平、垂直皆居中:
  2. 置中的設定不能寫死特定的偏移值
     (當父/子元素的寬高有變化時仍要維持居中)
  3. 下列範例以兩個 div 父(.container)子(.box)結構為例
    <div class="container">
      <div class="box">
      </div>
    </div>
    

寫法1:Flex 標配置中屬性

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

> Codepen Demo

  1. 將父層設為 display: flex
  2. 定義 Flex 子物件
    • justify-content:center  主軸對齊方式:居中
    • align-items:center  次軸對齊方式:居中

寫法2:Flex + Margin auto

.container{
    display: flex;
    
    .box{
        margin: auto
    }
}

> Codepen Demo

  • margin: auto:將剩餘空間自動分配
  • display 設為 grid / inline-flex / inline-grid 定義完整空間。

寫法3:Absolute + TRBL 0 + Margin auto

.container{
    position: relative; 
    
    .box{
        position: absolute; 
        top: 0;             
        bottom: 0;           
        left: 0;        
        right: 0;
        margin: auto;      
    }
}

> Codepen Demo

  • position: absolute 指定 top / right / bottom / left 時是以「第一個有定位的父層容器」為位移基準。
  • 有定位是指 positionrelative / absolute / fixed
    • 若想指定為對整依據的父層但原先沒有特別指定 position 又不想影響到該排版,可直接指定為 relative,因為 relative 在未指定 top / right / bottom / left 時不會有任何改變。
    • 如果所有父層都沒有定位,則將對齊「視窗」
  • top / right / bottom / left 指定為 0 時,會自動計算為可運用的空間。
  • margin: auto:將剩餘空間做自動分配
  • 注意:此方法只適用於定位物件要有明確寬度與高度!

寫法4:Absolute + LT 50% +Translate -50%

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

> Codepen Demo

  • 類似方法 3
  • position: absolute 依據其「有定位的父層」做位移。
  • top: 50%left: 50% 進行向下、左位移 50%:
  • 但因物件對齊點為左上角,故須進行 X、Y 軸負向偏移 50% 讓對齊點為物件中心:transform: translate(-50%,-50%) 才可真正置中。

寫法5:Relative + LT 50% +Translate -50%

.container{
    
    .box{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }
}

> Codepen Demo

  • 類似做法4。
  • position: relative 指定 top / right / bottom / left 時為原本位置做偏移。

寫法6:偽元素 + inline-block + vertical-align + text-align

.container{
    text-align: center;
    font-size: 0;
    
    &:after{
        content: '';
        height: 100%;
        vertical-align: middle;
        display: inline-block;
        width: 0px;
    }
    
    .box{
        display: inline-block;
        vertical-align: middle;
        
    }
}

> Codepen Demo


參考文件


個人 Blog: https://eudora.cc/


上一篇
[HTML] 關於 HTML
下一篇
[CSS] 選擇器表 (Selectors)
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言