CSSでのセンタリング方法のまとめ

この記事では、CSS のさまざまなセンタリング方法について詳しく説明しており、必要な場合は、対応するレンダリングを参照してください。

最初に行うことは、

水平方向に中央揃えにすることです
。もちろん、最も簡単な方法は、

コードをコピーすることです。コードは次のとおりです:

margin:0 auto;

つまり、margin-left を設定します。水平方向の効果を実現するには、margin-right プロパティを auto に設定します。

他の方法はどうですか？一つずつ説明しましょう:

line-height

まず、テキストの水平方向の中央揃え方法を紹介します:

コードをコピーします

コードは次のとおりです:

25c91c6da56e0ff613f4eec26f5a030aLiu Fang94b3e26ee717c64999d7867364b1b4a3

高さと同じになるように line-height を使用します:

コードをコピーします

コードは次のとおりです:

.wrap{ line-height: 200px;/*垂直センタリング キー*/

text-align:center;

height: 200px;
font-size: 36px;

background-color: #ccc;

}

効果は次のとおりです:

padding

パディングを使用するp Center の水平方向と垂直方向の位置を実現するための背景クリップと背景クリップ:

コードをコピー

コードは次のとおりです:

7b6d85b0aa6e093a8249c39fc0694ef3 bd57cc860bfe6c93a3cd6a320a425abd 94b3e26ee717c64999d7867364b1b4a3

94b3e26ee717c64999d7867364b1b4a3

背景によって - クリップをコンテンツ ボックスに設定し、背景をコンテンツ領域の外側の端までトリミングし、パディングを使用して外側の p から内側の値を引いた差の半分を設定します。実現するための p:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

効果は次のとおりです:

余白埋め

次に、水平方向と垂直方向のセンタリングを実現するための余白埋めの方法を紹介します。 まず、親と子 p を定義します:

7b6d85b0aa6e093a8249c39fc0694ef3
bd57cc860bfe6c93a3cd6a320a425abd94b3e26ee717c64999d7867364b1b4a3

94b3e26ee717c64999d7867364b1b4a3

ここでは、 child p margin-top は、親 p の高さから子 p の高さの半分を引いた値に設定され、オーバーフローを非表示に設定することで親 p の BFC がトリガーされます。 LESS コードは次のとおりです。

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

最終的なセンタリング効果は次のとおりです:

絶対配置

上、左50%でposition:absoluteを使用し、マージンを負の値に設定して、pを水平方向と垂直方向に中央に配置します。まず、親と子 p を定義する必要があります:

コードをコピーします

コードは次のとおりです:

7b6d85b0aa6e093a8249c39fc0694ef3

bd57cc860bfe6c93a3cd6a320a425abd6966594b081896546b708374d016ff9894b3e26ee717c64999d7867364b1b4a3

次に、対応する CSS を設定します:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

ここで、マージンの値は p の幅の半分です。最終的なレンダリングは次のようになります。 text-aligncentered

ご存知のとおり、text-align は p 内のコンテンツを水平方向に中央揃えにすることができます。しかし、サブ p をこの p の中心に配置したい場合はどうすればよいでしょうか? sub-pの表示をinline-blockに設定できます。

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

画像のセンタリング

一般的な画像のセンタリングは text-align と同じです。画像は p にパッケージ化されており、p の text-align は center に設定されます。

以下のリンクを参照してください:

個人サイト

画像をプレースホルダーとして使用して、親コンテナが高さと幅を取得できるようにする特別な方法があります。これにより、-50% オフセットの画像がパーセント計算。利点は、画像のサイズがわからないため、親コンテナのサイズを超えない任意の画像を配置でき、中央に配置されることです。また、互換性も良くIE6にもスムーズに対応しています。コードは次のとおりです:

コードをコピーします コードは次のとおりです:

7b6d85b0aa6e093a8249c39fc0694ef3

e388a4556c0f65e1904146cc1a846bee
e6fc9fcc52874ba0a4e94a11ccbef9ea
32f82c40fdd871113264fcc7fb31b6ba94b3e26ee717c64999d7867364b1b4a3

94b3e26ee717c64999d7867364b1b4a3

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

効果は次のとおりです:

transform居中

上面讲到的p居中的例子中，p的宽度都是固定的，然而实际项目中，有可能遇到不定宽的p，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的p水平垂直居中方法。
先上代码：

复制代码 代码如下:

0ebbc079c359d962fa7d284a06740928
  801879b5b005f115d3c6e975b0a9cc7f
    a0cef87aec67cb60216160347df5d9b5我是水平垂直居中噢！94b3e26ee717c64999d7867364b1b4a3
  94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

效果如下：

 

首先我们利用float，将需要居中的p的父p也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。
再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform : translate3d(0, -50%, 0);
这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

复制代码 代码如下:

0ebbc079c359d962fa7d284a06740928
  801879b5b005f115d3c6e975b0a9cc7f我是通过flex的水平垂直居中噢！94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

效果如下：

这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。

以上がCSSでのセンタリング方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。