10種類の水平垂直中心の方法

5556 ワード
方法
中央要素の縦横固定
absolute+負margin
はい
absolute + margin auto
はい
absolute + calc
はい
absolute + transform
no
writing-mode
no
lineheight
no
table
no
css-table
no
flex
no
grid
no
共通コード
/*   */
.parent{
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
.child{
    background: green;
}
.child.size{
    width: 200px;
    height: 200px;
}
/*   */

absolute+負margin


absolute+負margin DEMO
絶対位置の割合は親要素の幅に対して高く、この特性により子要素の中央に表示できますが、絶対位置は子要素の左上隅に基づいており、期待される効果は子要素の中心中央に表示されます.
この問題を解決するために、外距離の負の値を借りることができ、負の外距離は要素を反対方向に位置決めすることができ、サブ要素の外距離をサブ要素の幅の半分の負の値に指定することで、サブ要素を中央にすることができ、コードは以下の通りである.
HTMLコード

    
hhhhh




/*   */

/*   */
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

欠点は、サブエレメントの幅を知る必要があることです.

absolute + margin auto


absolute + margin auto DEMO
この方法では、中央要素の幅と高さの固定が必要です.
このように各方向の距離を0に設定することで、marginをautoに設定することで、各方向を中央にすることができます
HTMLコード

    
hhhhh

CSSコードは以下の通りです.
/*   */

/*   */
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

欠点:サブエレメントの幅を知る必要がある

absolute + calc


absolute+calc DEMO
CSS 3には計算属性があり、topのパーセンテージは要素の左上隅に基づいているので、幅の半分を減算すればいいのですが、
HTMLコード

    
hhhhh

CSSコードは以下の通りです.
/*   */

/*   */
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

calcの互換性に依存し,欠点はサブ要素の幅の高さを知ることである.

absolute + transform


absolute+transform DEMO
やはり絶対位置決めですが、サブエレメントの固定幅は必要ありませんのでsizeクラスは必要ありません
HTML: 

    
hhh

絶対位置決めの問題を修復するには、css 3の新しいtransformを使用します.transformのtranslate属性はパーセンテージを設定できます.自分の幅と高さに対して、translateを50%に設定すれば、中央に位置することができます.
CSS: 
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

writing-mode


writing-mode DEMO
writing-modeは文字の表示方向を変えることができ、
HTML:

CSS: 
.child2{
    writing-mode: vertical-lr;
}

効果を表示:

すべての水平方向のCSS属性は、==text-align==など、垂直方向の属性に変わります.==writing-mode===と==text-align==で水平方向と垂直方向を中央にすることができます.
HTML: 
'
    

        
hhhh

CSS: 
.parent{
    writing-mode: vertical-lr;
    text-align: center;
}
.parent-inner{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child{
    display: inline-block;
    margin: auto;
    text-align: left;
}

lineheight


lineheight DEMO
行の要素の中央にある属性を使用すると、水平方向に垂直に中央になることができます.
HTML: 

    
hhhhh

childを行内要素に設定し、==text-align==で水平中央に、==vertical-align==で垂直方向中央にすることもできます.
CSS: 
.parent{
    line-height: 400px;
    text-align: center;
    font-size: 0px;
}
.child{
    font-size: 16px;
    display: inline-block;]
    vertical-align: middle;
    line-height: initial;
    text-align: left;
}

table


table DEMO tableも水平垂直中央を実現できますが、冗長コードが多く追加されます.
HTML: 

    
        

            
                
hhhhh

CSS: 
.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

コードが冗長すぎてtableの正しい使い方ではありません

css-table


css-table DEMO
cssの新しいtable属性は、通常の要素をtable要素の表示効果に変えることができ、この特性によって水平垂直中央を実現することができます.
HTML: 

    
hhhhhh

CSS属性で、divをtableと同じように表示できます
CSS: 
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

flex


flex DEMO
flexは現代的なレイアウトスキームで、数行のコードが水平に垂直に中央に位置することができます.
HTML: 

    
hhhhhh

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

grid


grid DEMO
cssの新しいグリッドレイアウト、直接コードをアップロードし、
HTML: 

    
hhhhhh

CSS: 
.parent{
    display: grid;
}
.child{
    align-self: center;
    justify-self: center;
}

まとめ

  • PC端は互換性の要求があって、幅が広くて固定して、absolute+負margin
    • を推薦します
  • PC端は互換性の要求があって、幅が高くて固定しないで、css-table
    • を推薦します
  • PC側は互換性の要求がなく、flex
    • を推薦する.
  • モバイル側推奨flex
    • css 3学習-3 D変換小例
    [Mock] Random 22