在 LinkedIn 上關注我
在 Github.com 上關注我

點選閱讀

沒有Boaring Setion，我們可以重定向到編碼！

1. 使用 Flexbox

Flexbox 是一款功能強大的佈局工具，可輕鬆地將元素水平和垂直居中。

例子：

    
    
    
    


    

        
Centered with Flexbox
    

2. 使用網格

CSS Grid 是另一個強大的佈局系統，可輕鬆地將元素置中。

例子：

    
    
    
    


    

        
Centered with Grid
    

3. 使用絕對定位和變換

此方法涉及絕對定位 div 並使用變換將其居中。

例子：

    
    
    
    


    

        
Centered with Absolute Positioning
    

4. 使用自動保證金

對指定寬度的元素設定margin: auto可以使其水平居中。

例子：

    
    
    
    


    

        
Centered with Margin Auto
    

5. 使用表格顯示

此方法使用 display: table 和 display: table-cell 讓元素置中。

例子：

    
    
    
    


    

        

            
Centered with Table Display
        
    

拜耶
快樂編碼！