CSS のセンタリング: 完全ガイド_html/css_WEB-ITnose

水平方向の中央揃え: 水平方向

1. インライン要素

text-align : center;

2. 単一のブロックレベルの要素を中央揃えに設定できます。ブロックレベル要素 幅については、margin-left と margin-right を auto に設定するだけです。幅を設定しない場合、通常、ブロックレベルの要素が親要素を埋め尽くします。

{

width : 200px;

margin : 0 auto;

}

通常、

では複数のブロックレベルの要素を 1 行に配置することはできません。

でこの時点で、これらのブロックレベル要素の表示属性をインラインブロックまたはフレックスボックスに変更できます。

Inline-block case //親要素は text-align を center に設定します

.inline-block-center{

text-align : center

}

//子要素は、display を に設定しますinline -block

.inline-block-center div{

表示 : inline-block;

text-align : left;

フレックスボックスの場合:

の表示を直接設定します。親要素 flex の場合、親要素をフレキシブル ボックスとして表示します

.flex-center{

display : flex;

justify-content: center;

垂直方向中央揃え: 垂直方向

1. インライン要素

1.1 単一行のインライン要素

場合によっては、単に上部と下部のパディングが同じ値に設定されているという理由だけで、インライン要素またはテキスト要素が垂直方向の中央に配置されて見えることがあります。

.link{

padding-top : 30px;

padding-bottom : 30px;

}

場合によっては、line の値を設定することもできます。高さと高さの値は等しいです。

.center-text-trick{

高さ : 100px;

ホワイトスペース : nowrap;

1.2 複数行要素

同じpadding-topとpadding-bottomを設定すると、複数行の要素に垂直方向のセンタリング効果が生じます。

ただし、パディング設定が機能しない場合は、テーブルとテーブルセルを使用することもできます。表示がテーブルセルである要素の中央としてvertical-alignを使用するだけです。

.center-table {

表示 : テーブル;

幅 : 240px;

}

.center-table p {

表示:

マージン: 0;

色: 白;

}テーブルがなくなった場合date の場合は、flexbox を試してください。flex 子要素を flex 親要素内で簡単に中央に配置できます。

.flex-center-vertical{

display : flex;

justify-content : center;

flex-direction : column;

注: 条件は親要素である必要があります高さの高さは固定されています。

上記の垂直方向の中央揃え方法が失敗した場合は、「ゴースト要素」テクニックを使用し、疑似要素を使用することしかできません。フルハイトの疑似要素が親コンテナに配置され、垂直方向の中央に配置される要素がその疑似要素の中央に配置されます。

.ゴーストセンター{

位置 : 相対;

}

.ghost-center :: before{

表示 :

高さ : 100%;

幅: 1% ;

垂直整列 : 中央;

}

表示 : インラインブロック

}

2. ブロックレベル要素

2.1 要素の高さを知っていますか?

Web レイアウトでは、ブロック要素の幅が変わると、そのコンテンツの高さも変わるため、特定のブロック要素の高さが分からないことがよくあります。テキストのスタイルを変更すると、テキスト全体の高さも変わります。テキストコンテンツのサイズを変更すると、テキスト全体の高さも変わります。

高さと幅の比率が固定された要素。たとえば、img はサイズを変更すると高さも変わります。

ただし、要素の高さがわかっている場合は、次のように記述することで要素の垂直方向の中心を変更できます。

上部: 50%;

高さ: 100px;

}

2.2 要素の高さはわかりません

要素を押すことはできます最初に親要素の途中で、次のようにさらに少し移動します。 ;

transferY (-50%);

CSS3のflexboxは2.3でも使えますか？

はい、簡単です。

.parent{

表示 : フレックス;

位置調整 : センター;

3. 水平 + 垂直センタリング

1要素の幅と高さは固定です

まず、要素を絶対位置に配置し、親要素の 50%/50% に配置してから、負のマージンを使用して要素の幅と高さの半分に等しくします。 . 具体的なコードは以下の通り

.parent{

Position : 相対;

width : 300px;

;

パディング: 20px;

位置: 絶対;

上: 50%;

マージン: -70px 0 0 -170px;

}

2. 要素の幅と高さ要素の幅と高さがわからない場合は、CSS3のtransition属性を使用し、translate関数を使用して、両方の要素の高さと幅の-50％を移動できますX 方向と Y 方向。

.parent{

位置: 相対;

}

位置: 絶対;

左: 50%;

変換 : 変換(-50 %,-50%);

}

3. CSS3 flexbox の使用

コードは次のとおりです。parent {

ディスプレイ：flex; display：CSSを使用する

原文: https://css-tricks.com/centering-css-complete-guide/