Bagaimana untuk menetapkan pusat kotak dalam css

Dalam CSS, anda boleh menggunakan pelbagai kaedah untuk memusatkan kotak: pemusatan mendatar: jidar auto; : center;

Tetapan tengah kotak dalam CSS

Dalam CSS, terdapat banyak cara untuk menyelaraskan kotak.

Pusat mendatar

• margin: 0 auto;: Ini ialah kaedah yang paling biasa digunakan, yang menjajarkan kotak secara mendatar ke tengah elemen induk.
• text-align: center;: Hanya align tengah teks dalam kotak.

Pusat menegak

• menjajarkan menegak: tengah;: Pusatkan kotak secara menegak untuk menjajarkan elemen induk.
• line-height: Tetapkan ketinggian kotak supaya teks di dalam kotak berpusat menegak. (Terpakai pada satu baris teks)
• paparan: flex; align-item: tengah : Gunakan reka letak flexbox untuk memusatkan kotak secara menegak untuk menjajarkan elemen induk. (Berlaku untuk teks berbilang baris)

Pemusatan mendatar dan menegak

• transform: terjemah(-50%, -50%);: Gunakan transformasi CSS untuk memusatkan kotak secara mendatar dan menegak pada masa yang sama .
• paparan: flex; justify-content: center; align-item: center;: Gunakan susun atur flexbox untuk menyelaraskan kotak secara mendatar dan menegak pada masa yang sama.

Contoh kod:

<code class="css">.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}</code>

Atas ialah kandungan terperinci Bagaimana untuk menetapkan pusat kotak dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!