[CSS]要素を中央揃えにするいくつかの方法（垂直方向の中央揃えと水平方向の中央揃えを含む）、Webページの図

目次

序文

テキスト

1.要素の垂直方向のセンタリングのためのいくつかの方法

要素を中央に水平に表示する2つの方法

3つ目は、垂直方向のセンタリングの方法（上記の併用）

総括する

---

序文

要素のセンタリングを実現するには、実際には多くの方法があります。レイアウトやニーズが異なると、さまざまなソリューションを選択する必要があるため、1つをマスターするだけでは不十分です。ページをデザインするときに、センタリングもより厄介な問題になることがあります。分析してみましょう。さまざまな場面でのセンタリングと使用法を実現するさまざまな方法。

テキスト

1.要素の垂直方向のセンタリングのためのいくつかの方法

1.テーブルのvertical-alignプロパティ属性を使用します。

説明

 vertical-align属性は、要素が配置されているラインのベースラインに対する、ライン内の要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセンテージ値を指定できます。これにより、要素が上がるのではなく低くなります。テーブルセルでは、このプロパティはセルボックス内のセルコンテンツの配置を設定します。

中間	この要素を親要素の中央に配置します。

    <div class="wrapper">
        <div class="cell">
            <div class="content">
               //
            </div>
        </div>
    </div>

.wrapper {
    display: table;
    background: rgb(159, 200, 214);
    height: 150px;
    overflow: hidden;
}
.cell {
    display: table-cell;
    vertical-align: middle;
    background: rgb(209, 171, 159);
    height: 100px;
}

効果：

長所と短所：

利点：コンテンツは高さを動的に変更できます（CSSで定義する必要はありません）。ラッパーに十分なスペースがない場合、コンテンツは切り捨てられません

短所：Internet Explorer（IE8ベータ版でも）では無効であり、ネストされたタグが多く、コンテンツが多すぎると幅は制御できますが、高さは制御できません。

2.絶対位置のdivを使用して、上部を50％に設定し、上部マージンを負のコンテンツの高さ/ 2に設定します。

    <div class="box2">
        <div class="content2">
           //
        </div>
    </div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content2 {
    position: absolute;
    top: 50%;
    height: 150px;
    width: 300px;
    margin-top: -75px;
    /* negative half of the height */
    background: rgb(167, 200, 216);
    overflow: auto;
}

効果：

長所と短所：

幅と高さを設定でき、高さを設定する必要があります。つまり、オブジェクトはCSSで指定された固定の高さを持っている必要があります。高さが固定されているため、コンテンツにoverflow：autoを指定すると、コンテンツが多すぎる場合にスクロールバーが表示され、コンテンツがオーバーフローするのを防ぐことができます。

利点：すべてのブラウザに適用可能<br>タグをネストする必要がありません

短所：十分なスペースがない場合、コンテンツが表示されなくなります（本文のdivと同様に、ユーザーがブラウザーウィンドウを縮小すると、スクロールバーが表示されません）

3.フローターdivを追加します。フローターの高さ：ボックスの50％、margin-bottom：コンテンツの高さと下マージン/ 2を追加します。

<div class="box">
    <div class="floater"></div>
    <div class="content3">
        //
    </div>
</div>

.box {
    width: 400px;
    height: 300px;
    background: rgb(212, 159, 159);
}
.floater {
    height: 50%;
    margin-bottom: -80px;
    /* content的高加上下内边距 / 2*/
}
.content3 {
    width: 300px;
    height: 140px;
    background: #abc;
    overflow: auto;
}

効果：

このメソッドのアイデアは、実際には追加のフローター要素を使用して、コンテンツを親要素の中央に間接的に配置することです。

長所と短所：

        利点：

•         すべてのブラウザに適用可能
•         十分なスペースがない場合（たとえば、ウィンドウが縮小されている場合）、コンテンツは切り取られず、スクロールバーが表示されます（ここでのスクロールバーはウィンドウのスクロールバーを指します）

        短所：追加の空の要素が必要です

4.位置：絶対値が使用されます

<div class="box2">
    <div calss="content4">
        //
    </div>
</div>

 

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content4 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 220px;
    width: 70%;
    background: #abc;
    overflow: auto;
}

効果：

幅と高さが固定されたdiv。このdivはtop：0; bottom：0;に設定されています。ただし、高さが固定されているため、上部と下部の間隔を0にすることはできません。したがって、margin：auto;は中央に配置されます。margin：auto;を使用して、ブロックレベルの要素を垂直方向に中央揃えにするのは非常に簡単です。

利点：シンプル 

短所：

• IEでは無効（IE8ベータ版）
• 十分なスペースがない場合、コンテンツは切り捨てられますが、スクロールバー（ブラウザウィンドウのスクロールバー）がない場合は、オーバーフローを追加する必要があります。

5.行の高さをそのオブジェクトの高さの値に設定するだけで、テキストが中央に配置されます。このメソッドは、1行のテキストのみを中央揃えできます

<div class="box2">
    <div class="content5">
        只能一行
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content5 {
    height: 200px;
    line-height: 200px;
    background: rgb(204, 187, 238);
}

効果：

利点：

• すべてのブラウザに適用可能
• 十分なスペースがない場合は切り捨てられません

短所：

• テキストに対してのみ有効です（ブロックレベルの要素は無効です）
• 複数行の場合、単語の区切りが悪くなります
•  この方法は、ボタンのテキストの中央揃えや1行のテキストなどの小さな要素に非常に役立ちます。

6.フレックスレイアウト「フレキシブルレイアウト」を使用する

この方法はより高度で、標準化が必要な複数のブロック要素に適用できます。複数のサブ要素がある場合は、スペースを均等に割り当てて柔軟なレイアウトを使用するのが最適です。もちろん、サブ要素が1つしかない場合は、あなたができる実現は中心にあります。

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    align-items: center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

利点：

• 異なるパスの計算
• 入れ子にすることができます

短所：十分なスペースがない場合、コンテンツは（ブラウザによって）切り捨てられますが、スクロールバーはありません

2つ目は、要素を中央に水平に表示する方法がいくつかあります。

1.自動マージンを使用してセンタリングを実現します

<div class="box2">
    <div class="container1">
         //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container1 {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    background: #abc;
}

   

CSSで要素を水平方向に中央揃えするための推奨される方法は、margin属性を使用することです。つまり、要素のmargin-left属性とmargin-right属性をautoに設定します。実際の使用では、中央に配置する必要があるこれらの要素のコンテナdivを作成できます。特に注意が必要なのは、コンテナの幅を指定する必要があるということです。

利点：最も正確で合理的な方法、シンプル

短所：IE6以下ではサポートされていません

2. text-alignを使用して、テキストの中央揃えを実現します

<div class="container2">
    //   
</div>

.container2 {
    width: 300px;
    background: #eee;
    text-align: center;
}

body {text-align：center;}の場合、bodyのすべての子孫要素のテキストが中央に表示されます。

利点：ほとんどのブラウザと互換性があります

短所：このメソッドは、テキスト属性をテキストに適用しませんが、コンテナとして要素に適用するため、テキスト属性のtext-alignを左に追加で設定する必要があります。本当に標準に準拠しているブラウザは、コンテナの位置を変更せず、中央にテキストのみを表示します。

 3.自動余白とテキスト配置の組み合わせ

<div class="box2">
    <div class="container3">
            //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container3 {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    width: 300px;
    text-align: left;
}

            テキストの配置と中央揃えの方法は下向きの互換性が高く、自動マージン方法も最新のブラウザでサポートされているため、多くの設計者は2つを組み合わせて使用​​し、ブラウザ間の中央揃えのサポートを最大化します。

利点：センタリング効果のためのクロスブラウザサポートを最大化する

短所：追加のルールが必要です

4.負のマージンソリューション

<div class="box2">
    <div class="container4">
       //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container4 {
    background: rgb(255, 255, 168);
    position: absolute;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    text-align: left;
}

負のマージンソリューションは、要素に負のマージンを追加するだけではありません。この方法では、絶対測位とネガティブマージンの両方の手法を同時に使用する必要があります。

利点：

• すべてのブラウザに適用可能
• タグをネストする必要はありません

短所：コンテナの幅を設定して計算する必要があります

5.フレックスレイアウト「フレキシブルレイアウト」を使用する 

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    justify-content: center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

justify-content：center; / *水平方向に中央揃え* /

利点：

• 異なるパスの計算
• 入れ子にすることができます

短所：十分なスペースがない場合、コンテナーは（ブラウザーに対して）切り捨てられますが、スクロールバーはありません

3つ目は、垂直方向のセンタリングの方法（上記の併用）

1.位置：絶対値が使用されます

<div class="box2">
    <div class="content4">
        //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content4 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: 220px;
    width: 70%;
    background: #abc;
    overflow: auto;
}

2.フレックスレイアウト「フレキシブルレイアウト」を使用する 

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    justify-content: center;
    align-items:center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

 

総括する

理解するのは難しいことではありませんが、大切なのは自分でその効果を見て真に理解することです。