Petua Reka Letak CSS: Cara Melaksanakan Elemen Web Berpusatkan Mendatar dan Menegak

Petua susun atur CSS: Bagaimana untuk mencapai pemusatan mendatar dan menegak elemen web

Dalam reka bentuk dan pembangunan web, mencapai pemusatan elemen mendatar dan menegak adalah masalah yang sering dihadapi. Sama ada untuk memaparkan gambar, kotak teks di tengah atau susun atur berpusat keseluruhan halaman, penggunaan teknik reka letak CSS yang betul boleh mencapai kesan ini dengan mudah. Artikel ini akan memperkenalkan beberapa kaedah CSS biasa untuk mencapai pemusatan mendatar dan menegak, dan memberikan contoh kod khusus.

1. Kandungan teks elemen berpusat

1. Memusatkan elemen sebaris
   Jika anda ingin memusatkan kandungan teks elemen sebaris secara mendatar, anda boleh menggunakan atribut jajaran teks dan ketinggian garis, seperti yang ditunjukkan di bawah:

.container {
  text-align: center;
  line-height: 200px;
}

Antaranya, bekas ialah elemen bekas yang mengandungi kandungan teks, dan nilai atribut ketinggian garis ditetapkan kepada ketinggian bekas, supaya kandungan teks akan dipaparkan berpusat dalam arah menegak.

2. Memusatkan elemen peringkat blok
   Untuk elemen peringkat blok, anda boleh mencapai pemusatan mendatar dengan menetapkan margin lebar dan automatik, kemudian gunakan atribut penjajaran teks untuk memusatkan kandungan teks. Kod khusus adalah seperti berikut:

.container {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

Antaranya, bekas ialah bekas yang mengandungi elemen peringkat blok, tetapkan lebar kepada nilai tetap dan tetapkan jidar kiri dan kanan kepada "auto" untuk mencapai pemusatan mendatar. Kemudian gunakan atribut penjajaran teks untuk memusatkan kandungan teks.

2. Keseluruhan kandungan elemen berpusat

1. Kedudukan mutlak dan kaedah margin negatif
   Apabila lebar dan ketinggian elemen diketahui, anda boleh menggunakan kedudukan mutlak dan margin negatif untuk menjadikan keseluruhan elemen mendatar dan menegak dalam bekas induk Berpusat. Kod khusus adalah seperti berikut:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

Antaranya, ibu bapa ialah bekas induk dan anak ialah elemen anak Dengan menetapkan atribut kedudukan elemen anak kepada mutlak, dan kemudian menggunakan atribut atas dan kiri untuk memusatkan anak elemen secara mendatar dan menegak berbanding bekas induk. Dengan menetapkan lebar, tinggi dan jidar negatif unsur anak, anda boleh memastikan unsur anak dipusatkan dalam bekas induk.

2. Kaedah susun atur Flexbox
   Flexbox ialah mod susun atur yang diperkenalkan dalam CSS3, yang boleh mencapai pemusatan elemen mendatar dan menegak dengan mudah. Kod khusus adalah seperti berikut:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Antaranya, bekas ialah bekas yang mengandungi elemen Dengan menetapkan atribut paparan bekas untuk melentur, dan kemudian menggunakan atribut justify-content dan align-item, elemen itu boleh. berpusat secara mendatar dan menegak.

3. Pusatkan reka letak keseluruhan halaman

Untuk mencapai susun atur berpusat keseluruhan halaman, anda boleh menggunakan kedudukan mutlak dan margin negatif. Kod khusus adalah seperti berikut:

html, body {
  height: 100%;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
}

Antaranya, tetapkan ketinggian html dan elemen badan kepada 100% untuk memastikan ketinggian keseluruhan halaman adalah 100%. Kemudian, tetapkan kedudukan tengah elemen berbanding tetingkap penyemak imbas dengan menetapkan atribut kedudukan elemen .container kepada mutlak, dan kemudian menggunakan atribut atas dan kiri. Akhir sekali, elemen dialihkan secara mendatar dan menegak melalui fungsi terjemah atribut transformasi untuk mencapai susun atur berpusat bagi keseluruhan halaman.

Artikel ini memperkenalkan beberapa teknik reka letak CSS yang biasa digunakan, yang boleh mencapai pemusatan mendatar dan menegak elemen halaman web dengan mudah. Kaedah yang berbeza sesuai untuk senario yang berbeza, dan pembangun boleh memilih kaedah yang paling sesuai untuk mencapai kesan pemusatan mengikut keperluan sebenar. Saya harap artikel ini akan membantu anda dengan reka letak berpusat dalam reka bentuk dan pembangunan web!

Atas ialah kandungan terperinci Petua Reka Letak CSS: Cara Melaksanakan Elemen Web Berpusatkan Mendatar dan Menegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!