ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して垂直方向の中央揃えを実現する 7 つの方法を共有します
CSS を使用して垂直方向の中央揃えを実現する 7 つの方法を共有します
- 高洛峰オリジナル
- 2017-03-21 17:10:541572ブラウズ
今日は、私のブログアプリケーションが承認されました。純粋な CSS を使用して垂直方向の中央揃えを実現するために私が見てきたさまざまな方法についてお話します。なぜこれを最初の記事にするのでしょうか？これは私が初めてフロントエンドに連絡し始めたときに学んだ最も役立つ知識なので、皆さんもこの知識から恩恵を受けられることを願っています。
CSS で水平方向のセンタリングを実装するのは非常に簡単です。インライン要素は親要素の text-align:center を設定し、ブロックレベルの要素はそれ自体に magrin:auto を適用します。ただし、垂直方向のセンタリングを実現するのは少し面倒です。まず、これは非常に一般的な要件ですが、実際には、特にデザイン サイズが固定されていない場合、実現するのが困難です。私が見つけたメソッドをいくつか紹介します。
(1) 単一行のテキストを中央揃えにする HTML コード<p class="box1"> <p class="box2">垂直居中</p> </p>CSS コード
.box1{
height: 200px;
}
.box2{
line-height: 200px;
} (2) 画像垂直中央揃え
HTMLコード<p class="box1"> <img src="images/bg-sun.png" alt=""> </p>CSSコード
.box1{
line-height:200px;
}
.box1 img{
vertical-align: middle;
}
方法2:テーブルセル
CSSコード .box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法3:display:flex
(1) CSSコード .box1{
display: flex;
}
.box2{
margin:auto;
}( 2) CSSコード
.box1{
display: flex;
justify-content:center;
align-items:center;
}
方法 4: 絶対位置決め と負のマージン
(1) CSS コード .box1{
position: relative;
}
.box2{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;/*减去子元素高度一半*/
margin-left:-32px;/*减去子元素宽度一半*/
} (2) CSS コード
.box2{
position: absolute;
top:calc(50% - 10px);/*减去子元素高度一半*/
left:calc(50% - 32px);/*减去子元素宽度一半*/
}
方法 5: 絶対位置決め と 0
CSSコード
.box2{
width: 50%;
height: 50%;
background: #555;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方法6: translate
(1) CSSコード
.box2{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
(2) HTMLコード
<body> <p class="box1"> </p> </body>
CSSコード
.box1{
width: 200px;
height: 200px;
background: #666;
margin: 50vh auto 0;
transform: translateY(-50%);
}
方法7 :display:-
CSSコード
.box2{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center7 }以上がCSS を使用して垂直方向の中央揃えを実現する 7 つの方法を共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。