CSS 縦横完全センタリング Manual_html/css_WEB-ITnose

センタリングは常に CSS における典型的な問題でした。なぜ実装がこれほど難しいのでしょうか?それで誰かに笑われました。問題は、方法がないということではなく、状況によると思います。さまざまな方法がありますが、どの方法を使用するかを理解するのは困難です。

だから、彼が少しでも楽になればと思い、この記事を書きました。

水平方向の中央揃え

インライン要素 (inline または inline-*) の中央揃え

親ブロックレベルの要素を基準にして中央揃えにすることができます

1

2

3

.center-children {

text-align : center ;

}

ブロックレベル要素（ブロックレベル）を中央に配置しますか?

margin-left と margin-right を auto に設定することで中央に配置できます (また、 width も設定します)。コンテナ全体に充填され、センタリング効果は見られません)、など。

1

2

3

.center-me {

margin : 0 auto }

ブロックレベルの要素がたくさんある場合は?

非常に均等なブロックレベルの要素を水平方向に中央揃えで並べる必要がある場合は、別の表示タイプを使用した方がよいでしょう。以下は、inline-block と flex を使用した例です。

オンライン例: http://jsfiddle.net/ourjs/0b6b7wt8/

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

< メインクラス = "インラインブロック-center" >

< div >

私は兄弟とブロックのような要素であり、一列に中央に配置されています。

< div > ;

私は兄弟たちと同じような要素であり、私たちは兄弟たちよりも多くのコンテンツを持っています。 ;

私は、兄弟と並んでブロックのような要素です。 >

<

私は兄弟たちと同じように中心にいます

私は兄弟たちと同じような要素です。行。私の中には兄弟よりも多くのコンテンツがあります

<ディビジョン >

私は兄弟とブロックのような要素で、中心に並んでいます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

ボディ {

背景 : #f06d06 ;

フォントサイズ : 80% ;

}

main {

背景 : 白 ;

マージン : 20px 0 ;

パディング: 10px ;

}

main div {

背景 : 黒 ;

色: ホワイト;

パディング: 15px ;

最大幅 : 125px ;

余白 : 5px ;

}

.inline-block-center {

text-align : center ;

}

.inline-block- center div {

表示 : inline-block ;

text-align : left ;

}

.flex-center {

表示 : flex;

justify-content : center ;

}

垂直居中

垂直居中在CSS中有点棘手

内联元素（inline or inline-*）居中、画像文本と链接那样的？吗？

有時侯元素可表现像垂直居中，只是它们有相等的上下パディング

1

2

3

4

.link {

パディングトップ: 30px ;

パディングボトム : 30px ;

}

何らかの理由でパディングが使用できず、テキストが実行されない場合は、line-height を使用して、高さと同等にテキストを削除できます。 2 3

4

5

.center-text-trick {

高さ : 100px ;

行の高さ : 100px ;

white-space : nowrap ;

}

複数行ですか？

上下のパディング方法でも複数行を中央揃えにすることができますが、この方法がうまくいかない場合は、これらのテキストのコンテナを表セルモードで表示させてから、テキストのvertical-align属性を整列に設定することができます。 Talbe のように

オンライン デモ: http://jsfiddle.net/ourjs/0fn2u4rc/

1

2

3

4

5

6

7

8

9

10

< div class = "center-table" > p＆gt;私はCSS作成テーブルの複数のテキストを中心にしています。 3

4

5

6

7

8

9

10

11

12 13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

ボディ {

背景: #f06d06 ;

フォントサイズ: 80% ;

テーブル {

幅: 240px;

マージン: 20px;高さ: 250px;

}

背景: 黒;

パディング: 20px;

/* デフォルトは垂直配置: 中央; */

}

.center-table {

表示: テーブルの高さ: 250px;

背景: 白;

幅: 20px;

.center-table p {

背景: 黒 ;

Padding: 20px;

border: 10px Solid White;

vertical-align: middle;

ブロックレベルの要素は垂直方向に中央揃えになります?

要素の高さはわかりますか？

さまざまな理由から、Web ページのレイアウトの高さがわからないことはよくあります。

ただし、レイアウトの高さが固定されている場合は、次のように垂直方向に中央揃えにすることができます:

2 3

4

5 6

7

8

9

.parent {

位置 : 相対 ;

}

位置 : 絶対 ;

高さ : 100px ; : -50px ; /* そうでない場合ボックスモデルは次を使用しています: border-box; これを設定する必要があります */

}

要素の高さは不明です

不明ですが、幅の50%を押し上げることもできます

オンラインデモ: http://jsfiddle.net/ourjs/9sLf7p56/

1

2

3

4

5

6 7 8

.parent {

位置: 相対 ;

}

位置 : 絶対 ;

変換:

}

フレックスボックスは使えますか？

これは驚くことではありません、flexbox を使用する方がはるかに簡単です

1

2

3

4

5

<

<

私は親内で垂直方向に中央揃えされた、高さ不明のブロックレベルの要素。

12

13

14

15

16

17

18

19

20

21

22

23

ボディ {

背景 : #f06d06 ;

フォントサイズ : 80% ;

}

main {

背景 : 白 ;

高さ: 300px ;

幅: 200px ;

パディング: 20px ;

余白: 20px ;

ディスプレイ: フレックス;

flex-方向 : 列;

justify-content : center ;

サイズ変更: 垂直方向。

オーバーフロー : 自動 ;

}

main div {

背景 : 黒 ;

色: ホワイト;

パディング: 20px ;

サイズ変更: 垂直方向。

オーバーフロー : 自動 ;

}

同時水平和垂直居中

素子の宽度及び高さが固定されている場合

結果として素子の宽度及び高さが固定されている場合、先绝对居中、その後上移動及び左移動50%の宽度が必要です

1

2

3

4

5

6

7

8

9

10

11

12

13

.parent {

位置 : 相対 ;

}

.child {

width : 300px ;

高さ: 100px ;

パディング: 20px ;

位置: 絶対;

トップ : 50% ;

残り : 50% ;

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

}

元素の宽度高未知

如果你不知道高和宽度（可变的），你可使用transofrm属性在两个方向都平移负50%

1

2

3

4

5

6

7

8

9

10

.parent {

位置: 相対的;

}

.child {

位置 : 絶対 ;

トップ : 50% ;

残り : 50% ;

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

}