Teknologi yang biasa digunakan setakat 2014:

---

• Pendekatan 1 -transformtranslateX/translateY:

  Contoh di sini/Contoh skrin penuh

  Dalampelayar yang disokong(kebanyakan daripadanya), anda boleh menggunakantop: 50%/left: 50%in combination withtranslateX(-50%) translateY(-50%)untuk memusatkan elemen secara menegak/mendatar secara dinamik.

  .container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

---

• Kaedah 2 - Kaedah Flexbox:

  Contoh di sini/Contoh skrin penuh

  Dalampelayar yang disokong, tetapkandisplayof the targeted element toflexand usealign-items: centerfor vertical centering andjustify-content: centeruntuk pemusatan mendatar Cuma jangan lupa tambahkan awalan vendor untuk sokongan penyemak imbas tambahan (lihat contoh).

  .

  html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }

---

• Pendekatan 3 -table-cell/vertical-align: middle:

  Contoh di sini/Contoh skrin penuh

  Dalam sesetengah kes, anda perlu memastikan bahawahtml/bodyelement's height is set to100%.

  Untuk penjajaran menegak, tetapkan elemen indukwidth/heightto100%and adddisplay: table. Then for the child element, change thedisplaytotable-celland addvertical-align: middle.

  Untuk pemusatan mendatar, anda boleh sama ada menambahtext-align: centerto center the text and any otherinlinechildren elements. Alternatively, you could usemargin: 0 autoassuming the element isblockaras.

  html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

---

• Pendekatan 4 - Diposisikan secara mutlak50%dari atas dengan anjakan:

  Contoh di sini/Contoh skrin penuh

  Pendekatan ini menganggap bahawa teks mempunyai ketinggian yang diketahui - dalam keadaan ini,18px. Just absolutely position the element50%from the top, relative to the parent element. Use a negativemargin-topvalue that is half of the element's known height, in this case --9px.

  html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

---

• Pendekatan 5 - Kaedahline-height(Paling tidak fleksibel - tidak dicadangkan):

  Contoh di sini

  Dalam sesetengah kes, elemen induk akan mempunyai ketinggian tetap Untuk pemusatan menegak, anda hanya perlu menetapkan nilailine-heightpada elemen anak sama dengan ketinggian tetap elemen induk.

  .

  Walaupun penyelesaian ini berfungsi dalam beberapa kes, perlu diingat bahawa ia tidak berfungsi apabila terdapat berbilang baris teks -seperti ini.

  .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }

---

Kaedah 4 dan 5 bukanlah yang paling boleh dipercayai. Pilih salah satu daripada 3 teratas.

Jika ia adalah satu baris teks dan/atau imej, ia mudah dilakukan. Hanya gunakan:

text-align: center; vertical-align: middle; line-height: 90px; /* The same as your div height */

Itu sahaja. Jika ia boleh berbilang baris, ia lebih rumit sedikit. Tetapi ada penyelesaian dihttp://pmob.co.uk/. Cari "penjajaran menegak".

Memandangkan mereka cenderung untuk menggodam atau menambah div kompleks... Saya biasanya melakukannya menggunakan jadual dengan satu sel... untuk memastikannya semudah mungkin.

---

Kemas kini 2020:

Melainkan anda perlu menjadikannya berfungsi pada penyemak imbas terdahulu seperti Internet Explorer 10, anda boleh menggunakan Flexbox. Iadisokong secara meluas oleh semua pelayar utama semasa. Pada asasnya, bekas itu perlu ditetapkan sebagai bekas fleksibel dan berpusat di sepanjang paksi utama dan silangnya:

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

Nyatakan lebar tetap untuk item kanak-kanak, dipanggil "item fleksibel":

#content { flex: 0 0 120px; }

Contoh:http://jsfiddle.net/2woqsef1/1/

Untuk mengecilkan-membalut kandungan, ia lebih mudah lagi: cuma keluarkan garisanflex: ...daripada item flex, dan ia secara automatik dibalut.

Contoh:http://jsfiddle.net/2woqsef1/2/

Contoh di atas telah diuji pada pelayar utama termasuk MS Edge dan Internet Explorer 11.

Satu nota teknikal jika anda perlu menyesuaikannya: di dalam item flex, memandangkan item flex ini bukan bekas flex itu sendiri, cara CSS lama bukan flexbox berfungsi seperti yang diharapkan, bagaimanapun, jika anda menambah item flex tambahan bekas flex semasa, kedua-dua item flex akan diletakkan secara mendatar Untuk menjadikannya diletakkan secara menegak, tambahkanflex-direction: column;pada bekas flex Beginilah ia berfungsi antara bekas flex dan elemensegera..

Terdapat kaedah alternatif untuk melakukan pemusatan: dengan tidak menyatakan

pada item flex untuk mengambil semua ruang tambahan dalam keempat-empat arah, dan margin yang diagihkan sama rata akan menjadikan item flex berpusat pada semua arah ini berfungsi kecuali apabila ada adalah pelbagai item fleksibel Selain itu, teknik ini berfungsi pada MS Edge tetapi tidak pada Internet Explorer 11.centerfor the distribution on the main and cross axis for the flex container, but instead specifymargin: auto

---

Kemas Kini 2016/2017:

Ia boleh dilakukan dengan lebih biasa dengan

, dan ia berfungsi dengan baik walaupun dalam pelayar lama seperti Internet Explorer 10 dan Internet Explorer 11. Ia boleh menyokong berbilang baris teks:transform

position: relative; top: 50%; transform: translateY(-50%);

Contoh:

https://jsfiddle.net/wb8u02kL/1/

Lebar lilit mengecut:

Penyelesaian di atas menggunakan lebar tetap untuk kawasan kandungan. Untuk menggunakan lebar shrinkwrap, gunakan

position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%);

Contoh:

https://jsfiddle.net/wb8u02kL/2/

Jika sokongan untuk Internet Explorer 10 diperlukan, maka flexbox tidak akan berfungsi dan kaedah di atas serta kaedahline-heightakan berfungsi. Jika tidak, flexbox akan melakukan kerja itu.