在 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
        
    

拜耶
快乐编码！