ホームページ > 記事 > ウェブフロントエンド > CSS で要素の水平方向および垂直方向の中央揃えを実現する 2 つの一般的な方法の詳細な例
CSS で要素の水平方向および垂直方向の中央揃えを実現する 2 つの一般的な方法の詳細な例
- 巴扎黑オリジナル
- 2017-05-14 13:37:451740ブラウズ
この記事では、CSS で要素の水平方向と垂直方向の中央揃えを実現する 2 つの方法を主に紹介します。この記事では、学習や学習に役立つ完全なサンプル コードを紹介します。以下を見てください。
1. 親要素のフレックスレイアウトは、要素の水平方向と垂直方向のセンタリングを実現します
サンプルコードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
width:100%;
height: 200px;
background-color: #c43;
}
.child{
width:300px;
height:100px;
background-color: #c4235b;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>効果の画像は次のとおりです:
2. 絶対配置と負のマージン値により、要素の水平方向と垂直方向のセンタリングが実現されます
注: 要素自体が幅と高さを決定する必要があります
サンプルコードは次のとおりです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width:300px;
height:100px;
background-color: #873cac;
position:absolute;
top:50%;
left:50%;
margin-left: -150px;
margin-top:-50px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>レンダリングは次のとおりです:
以上がCSS で要素の水平方向および垂直方向の中央揃えを実現する 2 つの一般的な方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。