ホームページ > 記事 > ウェブフロントエンド > divを画面上で水平方向と垂直方向の中央に配置する方法
divを画面上で水平方向と垂直方向の中央に配置する方法
- 醉折花枝作酒筹転載
- 2021-04-25 18:25:245043ブラウズ
この記事では、div を画面上で水平方向と垂直方向の中央に配置する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
最近Webページを書く際にpを画面中央に表示する必要が多くなったので、比較的簡単な一般的な方法をいくつか記録しました。
水平方向の中央に <center></center> タグを追加するか、 margin:auto; を設定するだけです。 もちろん、次の方法も使用できます
以下の 2 つの方法 画面の中央に配置する方法 (水平中央と垂直中央)
デモの HTML コードを配置します:
<body> <p class="main"> <h1>MAIN</h1> </p> </body>
- 方法 1:
p絶対レイアウトを使用し、margin:auto;を設定し、上、左、右、下の の値を に等しくなるように設定します。必ずしもすべて 0 である必要はありません。
.main{
text-align: center; /*让p内部文字居中*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}効果は次のとおりです: 
- 方法 2:
これはまだ絶対レイアウトですが、左と上を両方 50% にします。これは水平方向です。 p の左端の部分が画面の左端の部分から 50% 離れているとします。これは垂直方向でも同じです。そのため、transform を使用してその幅 (高さ) の 50% を左に変換します。レンダリングは次のとおりです。上記と同じです。
.main{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}- 方法 3:
水平方向の中央揃えには、最も単純な<center></center>タグを使用できますが、これは時代遅れです。使用方法は次のとおりです。 :
<p><center>123</center></p>
この <center></center> タグは、中央揃えできる <p></p> タグ内のテキストに関連しています。
センター タグは古いため、正式な方法で使用することはお勧めできません。代わりに次の方法を使用できます:
<p style="text-align:center;">123</p>
推奨学習: html ビデオ チュートリアル
以上がdivを画面上で水平方向と垂直方向の中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。