Bagaimana untuk memusatkan halaman dalam css

Cara untuk menetapkan pusat halaman dalam css: 1. "text-align:center" menetapkan pemusatan mendatar. 2. tetapan "dispaly:flex" dipusatkan secara mendatar. 3. "display:table-cell" menetapkan pemusatan menegak. 4. "kedudukan:mutlak" menetapkan pemusatan menegak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pemusatan juga agak biasa dalam CSS. Biar saya meringkaskan beberapa kaedah pemusatan yang saya kenali. Sudah tentu, mesti ada lebih banyak cara penulisan yang lebih baik, dan anda dialu-alukan untuk membetulkan saya mengenai sebarang kekurangan dalam artikel.

Katakan sekarang senario ini diberikan:

<p class="parent">
  <p class="child">
    DEMO
  </p>
</p>

Panjang kandungan dalam class='child' div tidak pasti, dan kini adalah perlu untuk mencapai pemusatan div ini.

1. Pemusatan mendatar

1.1 penjajaran teks: tengah

Untuk memusatkan elemen sebaris atau elemen seperti sebaris dalam bekas induk peringkat blok, hanya gunakan text-align: center,
Kaedah ini boleh memusatkan inline/inline-block/inline-table/inline/flex.

.child {
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align:left;
}
.parent {
  text-align:center;
}

Apabila terdapat berbilang child div, jika anda menetapkan display: inline-block, anda perlu memberi perhatian kepada jurang antara setiap div Ini bukan bug, ia adalah ciri.

Jika anda ingin mengalih keluar jurang ini, terdapat beberapa penyelesaian:

1.

Sebab ruang putih antara elemen adalah kerana jurang antara segmen label Pada masa ini, anda hanya perlu mengalih keluar jurang antara HTML.

Contohnya cara penulisan begini, tentulah banyak cara untuk menulisnya, cuma pastikan hilangkan celah-celahnya, tetapi kaedah ini selalu terasa agak anti manusia untuk menulis.

<p class="parent">
  <p class="child">
  DEMO1</p
  ><p class="child">
  DEMO2</p
  ><p class="child">
  DEMO3</p>
</p>

2. Gunakan nilai margin negatif

Nilai negatif kaedah ini tidak mudah ditentukan, dan ia berkaitan dengan fon konteks, dsb. Kaedah ini tidak sesuai untuk kegunaan berskala besar.

.child {
  margin-right; -5px;
}

3 Gunakan saiz fon: 0

Kaedah ini boleh menyelesaikan masalah jarak ini dengan sangat mudah Anda hanya perlu menetapkan div ibu bapa font-size kepada 0, dan kemudian ingat untuk menetapkan atribut div anak font-size kembali.

.parent {
  font-size: 0;
}
.chilc {
  font-size: 16px;
}

4. Gunakan jarak huruf atau jarak perkataan

.parent {
  letter-spacing: -5px;
  /*或者*/
  word-spacing: -5px;
}
.chilc {
  letter-spacing: 0;
  /*或者*/
  word-spacing: 0;
}

1.2 dispaly: flex

Hanya serasi dengan IE10

.parent {
  display:flex;
  justify-content:center;
}
/*或者*/
.child{
  margin：0 auto;
}

2 Pempusatan menegak

1.1paparan: sel jadual

Elemen dengan ketinggian yang berbeza boleh dipusatkan secara menegak

.parent {
  display:table-cell;
  vertical-align:middle;
}

Kedudukan 2.2: mutlak

.parent {
  position:relative;
}
.child{
  position:absolute;
  top:50%;   /* 参照物是父容器 */
  transform:translateY(-50%); /*百分比的参照物是自身 */

Pembelajaran yang disyorkan: Video CSS tutorial

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