ホームページ > 記事 > ウェブフロントエンド > CSS 要素を垂直方向に中央揃えにする
CSS 要素を垂直方向に中央揃えにする
- autoloadオリジナル
- 2021-04-06 16:04:031718ブラウズ
CSS に関する厄介な問題は、垂直方向の中央揃えです。垂直方向のセンタリングを実現するにはいくつかの方法がありますが、それぞれの方法には一定の制限があるため、実際のビジネス シナリオに応じて垂直方向のセンタリングを使用できます。
1. コンテナ内のコンテンツは 1 行のテキストのみです
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
background-color: #1888fa;
color: white;
}
span {
line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。
这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>
2. コンテナは自然な高さです
CSS での最も単純な垂直方向の中央揃え方法は、コンテナに上下のパディングを均等に与え、コンテナとコンテンツが独自の高さを決定できるようにすることです。以下の例を参照してください。この例では、padding-top と padding-bottom を同じ値に設定することで、親コンテナー内のコンテンツを垂直方向の中央に配置します。
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1888FA;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html>3. FlexBox を使用する
<!DOCTYPE html>
<html>
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1888fa;
color: white;
}
</style>
<body>
<div>
<span>测试</span>
</div>
</body>
</html> 推奨: 「2021 CSS 面接の質問まとめ (最新) 》
以上がCSS 要素を垂直方向に中央揃えにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでのスキューは何を意味しますか次の記事：CSSでのスキューは何を意味しますか