CSS常用センターメソッド

CSSを使用してページをスタイルレイアウトする場合、中央は私たちが最もよく使うレイアウトの一つであり、中央レイアウトは水平中央と垂直中央に分けられます.本文では、CSSの中央配置のいくつかの一般的な方法を紹介します.
一、水平中央

行内要素およびクラス行内要素が中央

text-align: center;を使用して、ブロックの親コンテナの行内要素を中央に配置する.HTML:

    

        

            inline/inline-block/inline-table/inline-flex
        
    

CSS:

.father-div {
    text-align: center;
}
.inline-center {
    background-color: red;
}

text-align: center;この方法はinline/inline-block/inline-table/inline-flexなどの元素にしか作用しないことに注意しなければならない.

ブロック要素margin: 0 auto;

を用いる.
HTML:

CSS:

.center {
    background-color: red;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

ブロックレベル要素に対してmargin: 0 auto;を使用して水平方向に中央に配置するには、中央要素の幅を設定することに注意してください.高さは直接設定してもよいし、内容によって広げてもよい.

position測位

を用いる.
positionを使用してエレメントを中央に配置するには、親エレメントにposition: relative; HTMLを設定しながら、中央エレメントの幅を設定する必要があります.

CSS:

.father-div {
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

この方法は、親要素がposition: relative;に設定されている場合に、中央要素をposition: absolute;に設定するとともに、中央要素の幅を設定し、その後left: -50%に設定し、最後にmargin-leftを追加し、値が負の幅の半分にする必要がある.

flex中央

justify-content:center;主軸が中央に位置しています.HTML:

CSS:

.father-div {
    display: flex;
    justify-content: center;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
}

また、flexレイアウトを使用して要素を中心にして要素の幅を設定せずに、内容で広げることができます.

transform

を使用
HTML:

CSS:

.father-div {
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    float: left;
    transform: translateX(-50%);
}

transformと同様に、中央要素の幅を設定する必要はありません.
二、垂直中央

行内要素およびクラス行内要素の垂直中央は、親要素が高い固定された行内要素およびクラス行内要素に対して垂直中央であり、最も基本的な方法は、line-heightをheightと同じ

に設定することである.
HTML:

    

        

            centercentercentercentercentercentercentercentercentercentercenter
        
    

CSS:

.father-div {
    height: 100px;
    background-color: red;
}
.center {
    line-height: 100px;
}

vertical-alignこの方法を使用するには、中央要素の親要素にdisplay: table;を追加し、中央要素にdisplay: table-cell;を追加し、その後、vertical-alignの属性の値をmiddleに設定する必要があります.

HTML:

    

        

            centercentercentercentercentercentercentercentercentercentercenter
        
    

CSS:

.father-div {
    height: 100px;
    background-color: red;
    display: table;
}
.center {
    display: table-cell;
    vertical-align: middle;
}

positionによる位置決め

水平方向の中央に配置するのと同様に、要素を垂直方向に配置する方法では、絶対位置を使用できます.HTML:

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

transform

を使用
HTML:

    

        

            transformtransformtransformtransform
        
    

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    background-color: yellow;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

CSS 3のtransformプロパティを使用すると、開発者は中央要素の幅を設定しないことができます.
三、水平垂直中央

絶対位置中央

上記の水平中央の方法では、margin:0 autoが水平中央を実現できることについて述べたが、現在、margin:autoと同様に水平垂直中央を実現することができるようになった.HTML:

CSS:

.absolute-center {
    background-color: red;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

これにより.absolute-centerの水平垂直中央を実現できますが、絶対位置決め中央を使用するには以下の点に注意してください.

要素は高さを宣言する必要があります.たとえば、px、emまたはmin-/max-高さのパーセントを使用することもできます.

は、コンテンツのオーバーフローを防止するためにoverflow:hiddenを設定することが望ましい.

はWindows Phoneデバイスでは機能しません.

はIE-8以下のブラウザではサポートされていません.

position測位

を用いる.
要素の水平中央と垂直中央の内容ではposition位置決めを用いて要素の中央を実現することについて述べたが,両者を組み合わせると水平垂直を実現できるようになった.
HTML:

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

transform

を使用
同様に、CSS 3のtransformプロパティを使用して、要素の水平垂直中央を実現することもできます.HTML:

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

transformプロパティを使用すると、コンテンツを使用して要素を拡張し、要素の設定によって決定される幅を避けることができます.
以上は私が紹介するいくつかのCSSが中心の常用方法で、異なる情況の下で柔軟に選んで、最も良い効果を達成することを保証することができます.