ホームページ > 記事 > ウェブフロントエンド > CSS3の新機能をまとめて縦方向センタリングの実装方法をまとめます。
CSS3 の flex レイアウトや疑似要素の前などの機能は、垂直方向のセンタリングを実装するのに非常に便利でエレガントです。 ここでは、CSS3 の新機能を要約して、垂直方向のセンタリングの実装方法をまとめます:
0。
コンテナの高さが固定されているかどうかに関係なく、line-height と height をコンテナに設定し、2 つの値を等しくして、over-flow: hidden を追加するだけで単一行のみを考慮するのが最も簡単です。
.middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; }
利点:
(1)。ブロックレベル要素とインライン要素の両方をサポートします。
欠点:
(1) は 1 行のみ表示されます。 IE ではサポートされていません。中央揃えなどの場合は、相対高さを使用して高さと行の高さを定義してください
(2) に注意してください。
なぜですか?
次の 2 つの例を比較してください:
<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <br/> <br/> <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
.box{ position:absolute;/*或fixed*/ top:50%; left:50%; margin-top:-100px; margin-left:-200px; }
.box{ position: absolute;或fixed top:0; rightright:0; bottombottom:0; left:0; margin: auto; }
.box{ display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple; }
4. 新しい CSS3 属性を使用します。translate(x, y) 属性;
.box{ position: absolute; transform: translate(50%,50%); -webkit-transform:translate(50%,50%); -moz-transform:translate(50%,50%); -ms-transform:translate(50%,50%); }
5. 最も高度なものは、
.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;
以上がCSS3の新機能をまとめて縦方向センタリングの実装方法をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。