Bagaimana untuk memusatkan bingkai dalam html-html tutorial-php.cn

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.

Bagaimana untuk memusatkan bingkai dalam html

Cara Memusatkan Bingkai HTML

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

 内容

Salin selepas log masuk

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

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

 内容

Salin selepas log masuk

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

  内容

Salin selepas log masuk

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

 内容

Salin selepas log masuk

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. rrreeeUntuk pemusatan menegak, anda boleh menggunakan gaya paparan: flex; dan align-item: center;. Ini akan memusatkan bingkai secara menegak. rrreeeJika 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!