ホームページ > 記事 > ウェブフロントエンド > divを画面上で水平方向と垂直方向の中央に配置する方法
この記事では、div を画面上で水平方向と垂直方向の中央に配置する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
最近Webページを書く際にpを画面中央に表示する必要が多くなったので、比較的簡単な一般的な方法をいくつか記録しました。
水平方向の中央に <center></center>
タグを追加するか、 margin:auto;
を設定するだけです。 もちろん、次の方法も使用できます
以下の 2 つの方法 画面の中央に配置する方法 (水平中央と垂直中央)
デモの HTML コードを配置します:
<body> <p class="main"> <h1>MAIN</h1> </p> </body>
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; }
効果は次のとおりです:
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
<center></center>
タグを使用できますが、これは時代遅れです。使用方法は次のとおりです。 : <p><center>123</center></p>
この <center></center>
タグは、中央揃えできる <p></p>
タグ内のテキストに関連しています。
センター タグは古いため、正式な方法で使用することはお勧めできません。代わりに次の方法を使用できます:
<p style="text-align:center;">123</p>
推奨学習: html ビデオ チュートリアル
以上がdivを画面上で水平方向と垂直方向の中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。