LinkedIn でフォローしてください
Github.com でフォローしてください

クリックして読む

Boaring Setion がなければコーディングにリダイレクトできます!

1. フレックスボックスの使用

Flexbox は、水平方向と垂直方向の両方で要素を簡単に中央揃えできる強力なレイアウト ツールです。

例：

    
    
    
    


    

        
Centered with Flexbox
    

2. グリッドの使用

CSS グリッドは、要素を簡単に中央に配置できるもう 1 つの強力なレイアウト システムです。

例：

    
    
    
    


    

        
Centered with Grid
    

3. 絶対位置決めと変換の使用

この方法では、div を絶対的に配置し、transform を使用して中央に配置します。

例：

    
    
    
    


    

        
Centered with Absolute Positioning
    

4. 証拠金自動の使用

指定された幅の要素に margin: auto を設定すると、要素を水平方向に中央揃えにすることができます。

例：

    
    
    
    


    

        
Centered with Margin Auto
    

5. テーブル表示を使う

このメソッドは、display: table と display: table-cell を使用して要素を中央に配置します。

例：

    
    
    
    


    

        

            
Centered with Table Display
        
    

バイイ
コーディングを楽しんでください!