ホームページ > 記事 > ウェブフロントエンド > DIV のセンタリングを実現する 3 つの CSS メソッド
DIV のセンタリングを実現する 3 つの CSS メソッド
- 小云云オリジナル
- 2018-02-02 11:16:342587ブラウズ
この記事では、CSS で p センタリングを実現する方法を主に説明します。CSS コードはシンプルで理解しやすく、参考になると思います。
p センタリングの実装コードを共有します。具体的なコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
</style>
<p class="p1">
<p class="p2">
</p>
</p>
</body>
</html>
上記の 2 つの ps では、p2 が p1 の中央に表示されます
方法 1
マージンを使用します。 p1 幅から p2 の幅を引いた値が p2margin-left の値になります: (100-40)/2=30
p1 の高さから p2 の高さを引いた値が p2margin-top の値になります: (100-40)/ 2=30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p22{
margin-left: 30px;margin-top: 30px;
}
</style>
<p class="p1">
<p class="p2 p22">
</p>
</p>
</body>
</html>
2. 方法2
cssのposition属性を使用して、p1を基準としたp2の上と左を50%に設定し、margin-topを使用してそのマイナス半分に設定します。 p2 の高さを元に戻すには、Marg-left を幅の負の半分に設定して元に戻します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
position: relative;
}
.p22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
3 番目のメソッド
の位置属性を引き続き使用します。 css、以下のように html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
position: relative;
}
.p22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
four、メソッド4
css3の新しい属性table-cellを利用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
このメソッドのもう1つの利点は、p2の高さを固定する必要がないことです。以下の通り
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; background-color: green;}
.p11{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
p居中方法
</p>
</p>
</body>
</html>
関連する推奨事項:
divセンタリング: divセンタリング方法の最も包括的な概要
以上がDIV のセンタリングを実現する 3 つの CSS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。