Bagaimana untuk menetapkan pusat img dalam css

Dalam CSS, anda boleh memusatkan imej dengan: Menggunakan sifat penjajaran teks: Tetapkan imej sebagai elemen blok dan tetapkan jidar kiri dan kanan automatik. Gunakan susun atur flexbox: letakkan imej ke dalam bekas flexbox dan tetapkan sifat pemusatan mendatar dan menegak. Gunakan reka letak grid: Letakkan imej ke dalam bekas grid dan tetapkan kedua-dua sifat tengah mendatar dan menegak. Gunakan kedudukan mutlak: Alih keluar imej daripada aliran biasa, pusatkan secara mendatar dan pusatkan secara menegak dengan perubahan.

Cara untuk memusatkan imej dalam CSS

Dalam CSS, terdapat banyak cara untuk memusatkan imej:

Gunakan atribut penjajaran teks

<code class="css">img {
  display: block;
  margin: 0 auto;
}</code>

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

img {
  width: 100px;
  height: 100px;
}</code>

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

img {
  width: 100px;
  height: 100px;
}</code>

<code class="css">img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

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