CSSでのセンタリング方法のまとめ-CSSチュートリアル-php.cn

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

巴扎黑

リリース： 2017-08-11 14:27:17

オリジナル

1741 人が閲覧しました

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

最初に行うことは、

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

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

margin:0 auto;

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

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

line-height

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

コードをコピーします

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

Liu Fang

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

コードをコピーします

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

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

text-align:center;

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

background-color: #ccc;

}

効果は次のとおりです:

padding

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

コードをコピー

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

背景によって - クリップをコンテンツボックスに設定し、背景をコンテンツ領域の外側の端までトリミングし、パディングを使用して外側の 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 を定義します:

ここでは、 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 を定義する必要があります:

コードをコピーします

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

< ;/p>

次に、対応する 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にもスムーズに対応しています。コードは次のとおりです:

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

.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水平垂直居中方法。
先上代码：

复制代码代码如下:

我是水平垂直居中噢！

.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来实现的水平垂直居中的方法。

复制代码代码如下:

我是通过flex的水平垂直居中噢！

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;
}

ログイン後にコピー

效果如下：