Bagaimana untuk memusatkan ke atas dan ke bawah dalam css

CSS ialah bahasa yang digunakan untuk reka bentuk web dan digunakan secara meluas dalam reka letak dan penggayaan halaman web. Dalam reka bentuk web, masalah yang sangat biasa ialah cara mencapai susun atur berpusat atas-bawah. Artikel ini akan memperkenalkan beberapa kaedah dalam CSS yang boleh membantu anda mencapai kesan pemusatan atas dan bawah dengan mudah.

Kaedah 1: Gunakan display:flex

display:flex ialah kaedah reka letak baharu dalam CSS3, yang boleh mencapai pelbagai kesan reka letak kompleks dengan cepat. Ia juga boleh digunakan untuk mencapai kesan memusatkan bahagian atas dan bawah.

Kod HTML:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

Kod CSS:

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

.child {
  text-align: center;
}

Analisis kaedah:

Gunakan paparan:flex untuk mencapai pemusatan atas dan bawah, mula-mula anda perlu Tetapkan elemen induk kepada susun atur fleksibel, dan kemudian tetapkan sifat justify-content:center dan align-item:center untuk mencapai kesan pemusatan mendatar dan menegak masing-masing.

Dalam kod di atas, ketinggian elemen induk ditetapkan kepada 400px, yang boleh dilaraskan mengikut keperluan. Atribut text-align:center elemen kanak-kanak boleh memusatkan kandungan teks secara mendatar.

Kaedah 2: Gunakan position:absolute

Using position:absolute juga boleh mencapai kesan memusatkan bahagian atas dan bawah. Walau bagaimanapun, perlu diingat bahawa kaedah ini sesuai untuk elemen dengan ketinggian yang diketahui, kerana sifat margin atas dan margin bawah elemen perlu ditetapkan.

Kod HTML:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

Kod CSS:

.parent {
  position: relative;
  height: 400px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Analisis kaedah:

Gunakan kedudukan:mutlak untuk mencapai pemusatan atas dan bawah, mula-mula anda perlu Tetapkan elemen induk kepada position:relative, dan kemudian tetapkan sifat kedudukan elemen anak kepada mutlak supaya elemen anak boleh diletakkan secara relatif kepada elemen induk. Seterusnya, gunakan top:50% untuk mengalihkan tepi atas elemen anak ke tengah elemen induk Walau bagaimanapun, anda masih perlu melaraskan kedudukan elemen anak Anda boleh menggunakan translateY(-50%) dalam transformasi atribut untuk mencapai ini. Ia akan Unsur diterjemahkan ke atas sebanyak 50% daripada ketinggiannya, dengan itu mencapai kesan memusatkan bahagian atas dan bawah.

Perlu diambil perhatian bahawa ketinggian elemen induk dalam kod di atas ditetapkan kepada 400px sahaja untuk tujuan demonstrasi Dalam aplikasi sebenar, ia perlu dilaraskan mengikut situasi sebenar.

Kaedah 3: Gunakan sel jadual

Dalam CSS, sel jadual ialah kaedah reka letak sel jadual Walaupun ia tidak begitu biasa digunakan, ia boleh mencapai reka letak yang lebih tepat.

Kod HTML:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

Kod CSS:

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 400px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

Analisis kaedah:

Gunakan sel jadual untuk mencapai pemusatan atas dan bawah, anda perlu Atribut paparan elemen induk ditetapkan kepada sel jadual, dan atribut text-align:center dan vertical-align:middle ditetapkan untuk mencapai kesan pemusatan mendatar dan menegak masing-masing. Perlu diingatkan bahawa ketinggian elemen induk mesti ditetapkan, jika tidak, pemusatan atas dan bawah tidak dapat dicapai.

Atribut paparan elemen anak mesti ditetapkan kepada sekatan sebaris dan atribut penjajaran menegak:tengah juga perlu ditetapkan supaya elemen anak dipusatkan secara menegak berbanding dengan elemen induk. Kelebihan kaedah ini ialah ia boleh mencapai susun atur yang lebih tepat dan sesuai untuk pelbagai elemen dengan ketinggian yang diketahui.

Ringkasnya, terdapat banyak cara untuk mencapai kesan pemusatan atas dan bawah, dan situasi yang berkenaan juga berbeza. Anda boleh memilih kaedah yang sesuai untuk pelaksanaan berdasarkan keperluan khusus.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan ke atas dan ke bawah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!