CSS に関するディスカッション centering_html/css_WEB-ITnose

まえがき

CSS のセンタリングは、将来の開発の便宜のために、常に比較的デリケートなトピックであり、一般的に、要約する必要があると著者は感じています。センタリングの問題 垂直センタリングと水平センタリングに分けられます。実は、水平センタリングは非常に簡単ですが、垂直センタリングの方法と方法はさまざまです。

インライン要素のセンタリングスキーム

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

1. インライン要素の設定 text-align:center;

フレックスレイアウト設定 display:flex;justify-content:center; (柔軟な使用)
垂直中央揃え設定:

親要素の高さが決定された単一行テキスト (インライン要素)、高さ = line-height を設定
高さが決定された複数行テキスト (インライン要素)親要素 a: table に挿入 (挿入方法は水平方向の中央揃えと同じです)、その後、vertical-align:middle を設定します。 b: 最初に display:table-cell を設定し、次に、vertical-align:middle を設定します。

2. ブロックレベルの要素のセンタリングスキーム

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

固定幅のブロック要素の場合は、左右のマージン値を auto に;

可変幅ブロック要素 a: 要素の外側に table タグ (table、tbody、tr、td を含む) を追加します。要素を td に書き込み、マージン値を auto に設定します。
b: 要素の displa:inine メソッドを設定します。 c: 親要素を location:relative に設定します。 left: 50% と、position:relative および left:50% を設定する子要素

2. 垂直方向のセンタリング設定:

1 を使用します。 ) left、top、margin-left、および margin-top のプロパティを設定するには、

を使用します。属性、margin:auto を忘れないでください。

3. コンテンツを垂直方向に中央揃えにするには、display:table-cell 属性を使用します。

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

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

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

5. 最も高度な方法は、

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

6. フレックス レイアウトです。

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

結論

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

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