CSS3の新機能をまとめて縦方向センタリングの実装方法をまとめます。-CSSチュートリアル-php.cn

CSS3の新機能をまとめて縦方向センタリングの実装方法をまとめます。

高洛峰

リリース： 2017-03-09 17:43:04

オリジナル

1282 人が閲覧しました

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>

ログイン後にコピー

前の高さは絶対単位 px であり、オーバーフローは隠されていません。次の高さは相対単位 em であり、オーバーフローは隠されています。ブラウザがフォントの拡大をサポートしている場合は、先に進んで何が起こるかを確認してください。

1. left、top、margin-left、margin-top の属性を設定するには、position:absolute (固定) を使用します。

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

ログイン後にコピー

2. margin:auto を使用します。必須です。忘れないでください。

.box{   
    position: absolute;或fixed
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    margin: auto;   
}

ログイン後にコピー

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

.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:&#39;&#39;;   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;

ログイン後にコピー

レイアウトの前に使用します。

以上がCSS3の新機能をまとめて縦方向センタリングの実装方法をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。