Bagaimana untuk memusatkan bingkai dalam html

Terdapat empat kaedah untuk memusatkan bingkai HTML: margin: 0 auto;: Pusatkan bingkai secara mendatar. text-align: center;: Tengahkan kandungan bingkai secara mendatar. paparan: flex; align-item: center;: Pusatkan bingkai secara menegak. kedudukan: mutlak; atas: 50%; kiri: 50%; ubah: terjemah(-50%, -50%);: Menggunakan transformasi CSS untuk meletakkan bingkai di tengah-tengah bekas bersaiz tetap.

Cara Memusatkan Bingkai HTML

Dalam HTML, terdapat pelbagai cara untuk memusatkan bingkai. Cara paling mudah ialah menggunakan gaya margin: 0 auto;margin: 0 auto;样式。

<code class="html"><div style="margin: 0 auto; width: 500px;">
  内容
</div></code>

这将使框架在水平方向上居中，无论其容器的宽度如何。

另一种方法是使用text-align: center;样式。这将使框架中的内容居中，而不是整个框架。

<code class="html"><div style="text-align: center; width: 500px;">
  <p>内容</p>
</div></code>

对于垂直居中，可以使用display: flex;和align-items: center;样式。这将使框架在垂直方向上居中。

<code class="html"><div style="display: flex; align-items: center;">
  <div style="width: 500px;">
    内容
  </div>
</div></code>

如果框架具有固定高度和宽度，还可以使用position: absolute;和top: 50%; left: 50%; transform: translate(-50%, -50%);.

<code class="html"><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px;">
  内容
</div></code>

Ini akan memusatkan bingkai secara mendatar tanpa mengira lebar bekasnya. 🎜🎜Cara lain ialah menggunakan gaya 🎜text-align: center;🎜. Ini akan memusatkan kandungan dalam bingkai, bukannya keseluruhan bingkai. 🎜rrreee🎜Untuk pemusatan menegak, anda boleh menggunakan gaya 🎜paparan: flex;🎜 dan 🎜align-item: center;🎜. Ini akan memusatkan bingkai secara menegak. 🎜rrreee🎜Jika bingkai mempunyai ketinggian dan lebar tetap, anda juga boleh menggunakan 🎜kedudukan: mutlak;🎜 dan 🎜kiri: 50%; %, -50%);🎜 gaya. Ini akan menggunakan transformasi CSS untuk meletakkannya di tengah-tengah bekas. 🎜rreeee

Atas ialah kandungan terperinci Bagaimana untuk memusatkan bingkai dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!