CSS の垂直方向の中央揃えと水平方向の中央揃え_html/css_WEB-ITnose

前書き

CSS のセンタリングは、将来の開発の便宜上、常に比較的デリケートなトピックであり、一般に、センタリングの問題は、垂直方向のセンタリングと水平方向のセンタリングに分けて説明する必要があると感じています。実際、水平方向のセンタリングは非常に単純ですが、垂直方向のセンタリングの方法や方法はあらゆる種類の奇妙です。

インライン要素のセンタリング ソリューション

水平方向のセンタリング設定:

1. インライン要素

   text-align:center; を設定します
   

2. Flexlayout

   set display:flex;justify-content:center;
   

垂直センタリング設定:

親要素の高さを指定した単一行テキスト (インライン要素)

height = line-height; を設定する
1. 
   
複数行テキスト (インライン要素)親要素の高さを決定します
2. a: table を挿入 (挿入方法は水平方向の中央揃えと同じです) してから、vertical-align:middle を設定します

   b: 最初に display:table-cell を設定してから、vertical-align:middle を設定します;
   
   ブロックレベル要素のセンタリングソリューション

   水平方向のセンタリング設定:
   固定幅のブロック要素
左右のマージン値を自動に設定します
3. 
   
無限幅のブロック要素
4. a: 追加要素の外側の table タグ ( table、tbody、tr、td を含む完全な要素)、要素は td に書き込まれ、マージン値は auto に設定されます

   b: 要素の displa:inine メソッドを設定します。 : 親要素は、position:relative および left:50% を設定し、子要素は、position:relative および left:50% を設定します。 left、top、margin-left、margin-top のプロパティを設定するには
   

   .box{position:absolute;/*或fixed*/top:50%;left:50%;margin-top:-100px;margin-left:-200px;}

   
   
   
   2 .position:fixed (absolute) 属性を使用します。margin:auto を忘れないでください。コンテンツを垂直方向に中央に配置するには、display:table-cell 属性を使用します。

.box{    position: absolute;或fixed    top:0;    right:0;    bottom:0;    left:0;    margin: auto;}

4. 新しい CSS3 属性を使用します。translate (x, y) 属性を使用します。

.box{display:table-cell;vertical-align:middle;text-align:center;width:120px;height:120px;background:purple;}

5. 最も高度な属性を使用します。

.box{    position: absolute;    transform: translate(50%,50%);    -webkit-transform:translate(50%,50%);    -moz-transform:translate(50%,50%);    -ms-transform:translate(50%,50%);}

6.Flexレイアウト;

.box{position:fixed;display:block;background:rgba(0,0,0,.5);}.box:before{content:'';display:inline-block;vertical-align:middle;height:100%;}.box.content{width:60px;height:60px;line-height:60px;color:red;

結論

投稿者はこれらのセンタリング方法を一時的にマスターしました。読者がまだ良い方法を持っている場合、または何かが間違っていると思われる場合は、コメントしてください。ありがとうございます。

セグメント障害ブログ

CSDN ブログ