kod css untuk pemusatan div

Gunakan text-align: tengah ke tengah div secara mendatar dalam HTML Langkah-langkah untuk memusatkan menegak adalah seperti berikut: Tetapkan ketinggian div dan ketinggian garis menegak. Gunakan jidar: 0 automatik untuk memusatkan kandungan secara menegak. Pemusatan juga boleh dicapai menggunakan flexbox atau susun atur grid.

Kod CSS untuk div berpusat

Div berpusat

Dalam HTML, div ialah elemen peringkat blok yang dijajarkan secara mendatar ke kiri pada halaman secara lalai. Penjajaran tengah boleh dicapai menggunakan sifat CSS.

Pemusatan mendatar

Gunakan atribut text-align untuk memusatkan kandungan div secara mendatar. text-align属性可以水平居中div的内容。

<code class="css">div {
  text-align: center;
}</code>

垂直居中

垂直居中div的内容比较复杂，需要使用以下步骤：

1. 设置div的高度和一个垂直线。
2. 使用margin

   <code class="css">div {
     height: 200px;  /* 设置div的高度 */
     line-height: 200px;  /* 设置垂直线的高度 */
     margin: 0 auto;  /* 将内容垂直居中 */
   }</code>

Berpusat secara menegak

Kandungan div berpusat menegak adalah lebih rumit dan memerlukan langkah berikut:

1. Tetapkan ketinggian div dan garis menegak.

2. Gunakan atribut margin untuk memusatkan kandungan secara menegak.

   <code class="css">div {
     display: flex;
     justify-content: center;
     align-items: center;
   }</code>

   Gunakan flexbox ke tengah
   Anda juga boleh menggunakan susun atur flexbox untuk memusatkan div. 🎜

   <code class="css">div {
     display: grid;
     place-items: center;
   }</code>

   🎜🎜Gunakan susun atur grid ke tengah 🎜🎜🎜 susun atur grid juga boleh digunakan untuk tengah div. 🎜rreeee

Atas ialah kandungan terperinci kod css untuk pemusatan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!