internet Explorer ialah masalah yang merosakkan kehidupan kebanyakan pembangun web. Lebih daripada 60% masa pembangunan mungkin dibelanjakan untuk menyelesaikan masalah khusus ini, yang tidak penggunaan yang berkesan masa. Dalam artikel ini saya akan bercakap tentang pepijat yang paling popular dan ketidakkonsistenan dalam kedudukan, serta cara paling mudah menyelesaikan masalah ini.

1. Kedudukan tengah.

Setiap pembangun web, apabila meletakkan tapak web, berhadapan dengan keperluan untuk menyelaraskan elemen di tengah. Yang paling mudah dan cara popular- margin tulis: auto; . Kaedah ini membolehkan anda memusatkan elemen tanpa mengira resolusi skrin. Walau bagaimanapun, kaedah ini tidak berfungsi dalam IE6.

Pertimbangkan kod berikut:

#container ( sempadan: pepejal 1px #000; latar belakang: #777; lebar: 400px; tinggi: 160px; jidar: 30px 0 0 30px; ) #elemen ( latar belakang: #95CFEF; sempadan: pepejal 1px #36F; lebar: 300px; ketinggian: 100px; jidar: 30px auto; )

Hasil Jangkaan:

Walau bagaimanapun, Internet Explorer akan menunjukkan kepada anda perkara berikut:

Ini berlaku kerana IE6 tidak mengenali nilai auto yang ditetapkan kepada sifat margin. Nasib baik, ini mudah untuk diperbaiki.

Mari kita betulkan.

Yang paling mudah dan kaedah terbukti Untuk memusatkan elemen dalam IE6 ialah menulis pusat text-alignL pada elemen induk dan gunakan tex-align: kiri padanya sendiri supaya kandungannya dijajarkan dengan betul.

#container( sempadan: pepejal 1px #000; latar belakang: #777; lebar: 400px; tinggi: 160px; jidar: 30px 0 0 30px; text-align: tengah;) #elemen( latar belakang: #95CFEF; sempadan: pepejal 1px #36F; lebar: 300px; tinggi: 100px; jidar: 30px 0; text-align: kiri; }

2. Kesan langkah

Hampir setiap pembangun menggunakan senarai untuk membuat navigasi. Biasanya, elemen kontena dicipta, pautan yang diperlukan berada di dalamnya, dan kemudian sifat apungan ditetapkan dengan arah yang diperlukan. Pertimbangkan contoh berikut:

Ul ( gaya senarai: tiada; ) ul li a ( paparan: blok; lebar: 130px; tinggi: 30px; penjajaran teks: tengah; warna: #fff; apungan: kiri; latar belakang: #95CFEF; sempadan: pepejal 1px # 36F; jidar: 30px 5px; )

Kami mendapat perkara berikut:

Walau bagaimanapun, IE akan menunjukkan kepada kami:

Navigasi tidak begitu mesra, bukan? Walau bagaimanapun, terdapat 2 cara untuk membetulkan tingkah laku yang tidak menyenangkan ini.

kaedah pertama

Cara paling mudah adalah untuk menetapkan harta apungan bukan kepada pautan, tetapi kepada elemen senarai li.

Ul li ( terapung: kiri; )

kaedah ke-2

Cara kedua ialah menggunakan paparan: harta sebaris kepada elemen li. Selain itu, kami sedang membetulkan pepijat dengan margin berganda, yang diterangkan di bawah.

Ul li (paparan: sebaris)

3. Lekukan dua kali untuk elemen dengan set sifat terapung

Sangat mudah untuk menghasilkan semula ralat ini. Tetapkan elemen terapung: kiri dan kemudian padding. Akibatnya, kami mendapat lekukan dua kali lebih besar daripada yang ditentukan.

Mari lihat contoh:

#elemen( latar belakang: #95CFEF; lebar: 300px; tinggi: 100px; apungan: kiri; jidar: 30px 0 0 30px; jidar: pepejal 1px #36F; )

Hasil Jangkaan:

Walau bagaimanapun, dalam IE6 kita akan melihat perkara berikut:

Kita betulkan

Ini diperbetulkan dengan cara yang sama seperti masalah dengan kesan langkah. Iaitu, kami menetapkan paparan: harta sebaris untuk elemen. Kod kami akan berubah seperti ini:

#elemen( latar belakang: #95CFEF; lebar: 300px; tinggi: 100px; apungan: kiri; jidar: 30px 0 0 30px; jidar: pepejal 1px #36F; paparan: sebaris; }

4. Unsur dengan ketinggian kecil.

Kadang-kadang perlu mencipta elemen dengan ketinggian kecil, contohnya untuk menggunakannya sebagai elemen reka bentuk. Cara pertama yang terlintas di fikiran ialah menetapkan ketinggian. Walau bagaimanapun, IE tidak akan menunjukkan kepada anda apa yang anda harapkan.

Hasilnya ialah elemen dengan ketinggian 2px dan sempadan 1px.

Mari kita betulkan.

Sebab pepijat ini sangat mudah: IE hanya menukar ketinggian elemen kepada ketinggian yang sama dengan saiz fon. Oleh itu, kami hanya menetapkan saiz fon kepada sifar.

#elemen( latar belakang: #95CFEF; sempadan: pepejal 1px #36F; lebar: 300px; tinggi: 2px; jidar: 30px 0; saiz fon: 0; }

Pendekatan kedua

Satu lagi cara yang baik- ini adalah untuk menggunakan sifat limpahan, anda perlu menggunakan nilai tersembunyi. Dan kemudian elemen itu akan mempunyai ketinggian yang diperlukan.

#elemen( latar belakang: #95CFEF; sempadan: pepejal 1px #36F; lebar: 300px; tinggi: 2px; jidar: 30px 0; limpahan: tersembunyi; }

5. Limpahan dan kedudukan relatif unsur.

Pepijat ini muncul apabila elemen induk mempunyai limpahan: set sifat auto, dan anak diposisikan berbanding dengannya, iaitu, ia ditetapkan kepada harta kedudukan: saudara . Ternyata begitu unsur kanak-kanak terletak, seolah-olah, di atas induk. Mari lihat contoh:

#elemen( latar belakang: #95CFEF; sempadan: pepejal 1px #36F; lebar: 300px; tinggi: 150px; jidar: 30px 0; limpahan: auto; ) #anotherelement( latar belakang: #555; lebar: 150px; tinggi: 175px; kedudukan : relatif; jidar: 30px; )

Hasil Jangkaan:

Keputusan dalam IE:

Mari kita betulkan.

Cara paling mudah untuk menyelesaikan masalah ialah menetapkan elemen induk kedudukan relatif.

#element( latar belakang: #95CFEF; sempadan: pepejal 1px #36F; lebar: 300px; tinggi: 150px; jidar: 30px 0; limpahan: auto; kedudukan: relatif; }

6. Model Kotak

Internet Explorer salah mentafsir model kotak.

Contohnya ada 2 elemen div. Satu dengan pepijat telah diperbaiki dan satu lagi tidak. Akan ada perbezaan saiz antara mereka sama dengan jumlah padding dalaman.

Kita betulkan

Saya akan memberitahu anda tentang model yang betul dalam artikel lain, tetapi sekarang saya hanya akan menunjukkan kepada anda cara untuk membetulkannya.

Intinya ialah untuk IE5/6 ketinggian dan lebar mesti ditetapkan secara berasingan. Sebagai contoh, saya melakukannya seperti ini:

Untuk semua pelayar

#elemen(lebar: 400px; tinggi: 150px; padding: 50px; )

Untuk IE anda perlu melakukan ini:

#elemen ( lebar: 400px; tinggi: 150px; \height: 250px; \width: 500px )

Pada asasnya anda menambah nilai padding pada dimensi elemen untuk IE6.

7. Menetapkan saiz minimum.

Lebar dan ketinggian minimum tidak boleh ditukar ganti apabila melakukan Reka bentuk yang cantik. Malangnya, IE mengabaikan sifat ketinggian min dan lebar min.

Kita betulkan

Untuk menyelesaikan masalah, mari gunakan!pengecam penting.

#elemen ( min-height: 150px; height: auto !important; height: 150px; )

Pilihan kedua.

Jika kita mengambil kira hakikat bahawa IE tidak memahami pemilih bersarang, maka kita boleh melakukan ini:

#element ( min-height: 150px; height: 150px; ) html>body #element ( height: auto; )

8. Kelakuan tidak betul dalam model apungan.

Salah satu konsep yang paling penting dalam susun atur tanpa meja menggunakan CSS ialah apungan. Selalunya IE6 mengendalikan perkara ini dengan betul, tetapi kadangkala terdapat masalah. Contohnya, apabila kandungan tidak pecah atau lebar elemen lebih besar daripada lebar induk. Dalam kes ini, markup pecah. Mari lihat contoh.

#elemen, #anotherelement( latar belakang: #95CFEF; jidar: pepejal 1px #36F; lebar: 100px; tinggi: 150px; jidar: 30px; pelapik: 10px; apungan: kiri; ) #bekas( latar belakang: #C2DFEF; sempadan: pepejal 1px #36F; lebar: 365px; jidar: 30px; padding: 5px; limpahan: auto; )

Dapat dalam IE:

Seperti yang anda lihat, div pertama telah berkembang untuk memuatkan lebar kandungan dan menolak yang bersebelahan ke baris seterusnya.

Kita betulkan

Tiada penyelesaian yang indah. Tetapi anda boleh, sebagai contoh, menggunakan limpahan: harta tersembunyi, tetapi kemudian kandungan akan dipotong dan sebahagian daripadanya tidak akan kelihatan.

#elemen( latar belakang: #C2DFEF; sempadan: pepejal 1px #36F; lebar: 365px; jidar: 30px; padding: 5px; limpahan: tersembunyi; )

9. Ruang tambahan antara item senarai.

IE 6 menambah padding tambahan pada senarai menegak. Mari kita lihat contoh.

• Pautan 1
• Pautan 2
• Pautan 3

Ul ( margin:0; padding:0; list-style:none; ) li a (latar belakang: #95CFEF; paparan: blok; )

Apa yang sepatutnya kelihatan seperti:

Apa yang ditunjukkan oleh IE:

kaedah pertama

Cara paling mudah ialah dengan menentukan lebar atau ketinggian untuk pautan.

Li a ( latar belakang: #95CFEF; paparan: blok; lebar: 200px; }

kaedah ke-2

Cara seterusnya ialah menetapkan apungan: kiri dan kemudian kosongkannya.

Li a ( latar belakang: #95CFEF; terapung: kiri; jelas: kiri; }

kaedah ke-3

Cara ketiga ialah menetapkan paparan: sebaris pada elemen li. Yang, dengan cara ini, akan membetulkan ralat margin berganda yang diterangkan di atas.

Menggunakan margin:auto untuk memusatkan elemen blok secara mendatar adalah baik kaedah yang diketahui. Tetapi pernahkah anda terfikir bagaimana ia berfungsi?

Kesan auto bergantung pada jenis elemen dan konteks. Untuk padding atas, CSS auto boleh bermakna salah satu daripada dua perkara: mengambil segala-galanya ruang kosong atau 0 piksel. Bergantung pada ini, struktur yang berbeza akan ditentukan.

"auto" - menduduki semua ruang yang ada

Ini ialah cara paling biasa untuk menggunakan auto untuk lekukan. Jika kita menetapkan auto untuk pelapik kiri dan kanan satu elemen, ia akan sama rata mengambil semua ruang mendatar yang tersedia dalam bekas. Ini akan meletakkan elemen di tengah.

Lihat contoh

Ini hanya berfungsi untuk padding mendatar. Tetapi tidak akan berfungsi untuk elemen terapung dan sebaris. Dan juga untuk elemen kedudukan mutlak dan tetap.

Simulasikan tingkah laku terapung dengan memperuntukkan ruang yang tersedia

auto mengagihkan semua ruang kosong secara sama rata antara jidar kanan dan kiri. Tetapi apa yang berlaku jika kita menetapkan nilai ini untuk hanya satu pelapik? Kemudian ia akan mengambil semua ruang yang ada, dan elemen akan diimbangi ke tepi kanan atau kiri.

Lihat contoh

“auto” — tetapkan 0 piksel

Seperti yang dinyatakan di atas, auto tidak berfungsi untuk elemen terapung, sebaris atau kedudukan mutlak. Mereka sudah mempunyai struktur yang ditentukan, jadi tidak ada gunanya menggunakan auto margin.

Ini hanya akan mengganggu struktur asal. Termasuk CSS untuk menginden teks di bahagian atas. Oleh itu, auto akan menetapkan pelapik elemen ini kepada 0 piksel.

auto juga tidak akan berfungsi pada elemen blok standard melainkan ia mempunyai lebar yang ditentukan. Dalam semua contoh yang saya berikan, elemen mempunyai lebar yang ditentukan.

Nilai auto akan mentakrifkan padding 0 piksel apabila lebar elemen blok ditetapkan kepada auto atau 100% . Biasanya ia mengambil keseluruhan lebar bekas, jadi akan ada 0 piksel lagi untuk lebar padding.

Apakah yang berlaku kepada pelapik menegak apabila ditetapkan kepada automatik?

auto untuk kedua-dua pelapik atas CSS dan pelapik bawah sentiasa dikira sebagai 0 piksel ( tidak termasuk elemen kedudukan mutlak). Spesifikasi W3C menyatakan perkara berikut:

"Jika 'margin-top' atau 'margin-bottom' ditetapkan kepada 'auto', ia ditetapkan kepada 0."

Ini disebabkan oleh fakta bahawa pada halaman web, semua elemen paling kerap diedarkan secara menegak. Oleh itu, dengan memusatkan ketinggian elemen dalam bekas, kami tidak akan mencapai hakikat bahawa ia akan kelihatan berpusat secara menegak berbanding halaman itu sendiri, seperti yang berlaku dengan pemusatan mendatar.

Atau mungkin atas sebab yang sama bahawa mereka memutuskan untuk menambah pengecualian untuk elemen kedudukan mutlak yang boleh dipusatkan secara menegak berbanding ketinggian halaman keseluruhan.

Atau kerana kesan gabungan inden (mencantumkan inden unsur jiran ). Ini adalah satu lagi pengecualian kepada peraturan ini menentukan offset menegak.

Memusatkan elemen dengan kedudukan mutlak

Memandangkan terdapat pengecualian untuk elemen kedudukan mutlak, anda boleh menggunakan auto untuk memusatkannya secara menegak dan mendatar. Tetapi pertama-tama kita perlu memikirkan bila margin:auto akan berfungsi betul-betul seperti ini untuk padding atas CSS.

Satu lagi spesifikasi W3C berkata:

“Jika ketiga-tiga kedudukan (“kiri”, “lebar” dan “kanan”) ditetapkan kepada “auto”, mula-mula tetapkan “margin-kiri” dan “margin-kanan” kepada 0...
» Jika "auto" ditentukan hanya untuk "margin-kiri" dan "margin-kanan", maka selesaikan persamaan dengan syarat tambahan supaya kedua-dua padding mempunyai lebar yang sama."

Situasi mengenai nilai auto untuk pelapik mendatar diterangkan di sini secara terperinci. Untuk memastikan bahawa padding ini adalah saiz yang sama, kiri , lebar dan kanan tidak boleh ditetapkan kepada auto ( nilai lalai mereka). Untuk memusatkan elemen secara mendatar, anda perlu menetapkan lebar elemen yang diposisikan secara mutlak kepada nilai tertentu, dan kiri dan kanan mesti mempunyai nilai yang sama.

Dalam spesifikasi juga disebut sesuatu yang serupa untuk padding atas div CSS.

"Jika 'atas', 'tinggi' dan 'bawah' ditetapkan kepada 'auto', tetapkan 'atas' kepada statik..."

"Jika salah satu daripada tiga kedudukan tidak ditetapkan kepada 'auto': Jika 'atas' dan 'bawah' ditetapkan kepada 'auto', selesaikan persamaan dengan syarat tambahan untuk menetapkan padding ini kepada nilai yang sama."

Oleh itu, untuk memusatkan elemen secara menegak secara menegak, atas , tinggi dan bawah tidak boleh ditetapkan kepada auto .

Sekarang, meletakkan semua ini bersama-sama, kami mendapat yang berikut:

Lihat contoh

Kesimpulan

Jika anda perlu mengalihkan elemen pada halaman ke kanan atau kiri tanpa elemen bekas ( sebagai contoh, seperti dalam kes apungan), ingat bahawa anda boleh menggunakan auto untuk lekukan.

Menukar elemen kepada kedudukan mutlak hanya untuk memusatkannya secara menegak ( CSS padding atas), Tidak idea terbaik. Terdapat pilihan lain seperti flexbox dan CSS transform yang lebih sesuai untuk ini.

Terjemahan artikel " CSS – margin auto – Bagaimana ia Berfungsi"disediakan oleh pasukan projek mesra.

baik buruk

Penerangan

Menetapkan jumlah pelapik dari setiap tepi elemen. Jidar ialah ruang dari sempadan unsur semasa ke sempadan dalaman unsur induknya (Rajah 1).

nasi. 1. Inden dari tepi kiri elemen

Jika elemen tidak mempunyai induk, padding akan menjadi jarak dari tepi elemen ke tepi tetingkap penyemak imbas, dengan mengambil kira bahawa tetingkap itu sendiri juga mempunyai padding yang ditetapkan secara lalai. Untuk menyingkirkannya, anda harus menetapkan nilai margin untuk pemilih sama dengan sifar.

Sifat margin membolehkan anda menetapkan nilai margin untuk semua sisi elemen sekaligus atau mentakrifkannya hanya untuk sisi tertentu.

Sintaks

margin: [nilai | minat | auto] (1,4) | mewarisi

Nilai

Anda boleh menggunakan satu, dua, tiga atau empat nilai, dipisahkan oleh ruang. Kesannya bergantung pada bilangan nilai dan ditunjukkan dalam jadual. 1.

Jumlah lekukan boleh dinyatakan dalam piksel (px), peratusan (%) atau nilai lain yang boleh diterima. unit CSS. Nilai boleh sama ada nombor positif atau negatif.

Auto Menentukan bahawa saiz inden akan dikira secara automatik oleh penyemak imbas. mewarisi Mewarisi nilai ibu bapa.

HTML5 CSS2.1 IE Cr Op Sa Fx

Hasilnya contoh ini ditunjukkan dalam Rajah. 2.

nasi. 2. Menggunakan sifat margin

Model objek

document.getElementById("elementID ").style.margin

Pelayar

Internet Explorer 6 dalam mod aneh tidak menyokong pemusatan blok menggunakan margin: 0 peraturan auto. Terdapat juga pepijat dalam penyemak imbas ini dengan menggandakan nilai padding kiri atau kanan untuk elemen terapung yang bersarang dalam elemen induk. Jidar yang bersebelahan dengan sebelah ibu bapa digandakan. Masalahnya biasanya diselesaikan dengan menambahkan paparan: sebaris pada elemen terapung.

Versi Internet Explorer sehingga dan termasuk 7.0 tidak menyokong nilai warisan.

Catatan

U elemen blok terletak bersebelahan antara satu sama lain secara menegak, kesan runtuh diperhatikan apabila inden tidak dijumlahkan, tetapi digabungkan antara satu sama lain. Runtuhan itu sendiri bertindak pada dua atau lebih blok (satu boleh bersarang di dalam yang lain) dengan inden di bahagian atas atau bawah, manakala inden bersebelahan digabungkan menjadi satu. Untuk padding kiri dan kanan, runtuh tidak pernah digunakan.

Runtuh tidak berfungsi:

• untuk elemen yang mempunyai sifat pelapik ditetapkan pada bahagian runtuh.
• untuk elemen yang mempunyai sempadan yang ditentukan pada bahagian yang runtuh;
• pada elemen dengan kedudukan mutlak, iaitu mereka yang kedudukannya ditetapkan kepada mutlak;
• pada elemen terapung (yang mana sifat terapung ditetapkan ke kiri atau kanan );
• untuk elemen sebaris;
• Untuk .

Umumnya berpusat elemen HTML pada halaman - ini bukan perkara yang sukar. Dalam sesetengah kes... pembangun web perlu memerah otak mereka untuk mencari penyelesaian terbaik.

Memusatkan elemen secara mendatar tidak begitu sukar; secara menegak ia sudah menimbulkan persoalan, tetapi menggabungkannya secara umum boleh menjadi jalan buntu. Dalam era reka bentuk penyesuaian, kami jarang jelas tentang dimensi tepat unsur-unsur tertentu. Saya mengira 6 dalam pelbagai cara elemen pemusatan dengan menggunakan CSS. Mari kita mulakan dengan contoh mudah, mari selesaikan dengan yang lebih kompleks. Ia akan berfungsi dengan kod HTML yang sama:

Penjajaran mendatar menggunakan penjajaran teks

Kadang-kadang penyelesaian yang paling mudah adalah yang terbaik:

Div.center ( text-align: center; background: hsl(0, 100%, 97%); ) div.center img (lebar: 33%; tinggi: auto; )

Tiada pemusatan menegak di sini: untuk ini anda perlu menambah sifat margin atas dan margin bawah pada div.

Pemusatan dengan jidar: auto

Satu lagi penyelesaian untuk penjajaran mendatar:

Div.center ( latar belakang: hsl(60, 100%, 97%); ) div.center img ( paparan: blok; lebar: 33%; tinggi: auto; margin: 0 auto; )

Sila ambil perhatian bahawa untuk kaedah ini anda perlu menetapkan paparan: harta blok.

Pemusatan menggunakan sel jadual

Dengan menggunakan paparan: sel jadual, kami boleh memastikan bahawa elemen dipusatkan secara menegak dan mendatar. Tetapi di sini kita perlu menyarangkan imej dalam elemen div lain.

Dijajarkan tengah ( paparan: jadual; latar belakang: hsl(120, 100%, 97%);lebar: 100%; ) .teras tengah ( paparan: sel jadual; penjajaran teks: tengah; penjajaran menegak: tengah; ) .img teras tengah ( lebar: 33%; tinggi: auto; )

Untuk semuanya berfungsi dengan betul, div perlu ditetapkan kepada lebar: 100%. Untuk memusatkan elemen secara menegak, kami akan menggunakan teknik standard dengan menetapkan ketinggian. Berfungsi di mana-mana, termasuk IE8+.

Penjajaran mutlak

sangat penyelesaian yang menarik. Ideanya ialah anda perlu menetapkan ketinggian bekas luar:

Dijajarkan mutlak ( kedudukan: relatif; ketinggian min: 500px; latar belakang: hsl(200, 100%, 97%); ) .img dijajarkan mutlak ( lebar: 50%; lebar min: 200px; ketinggian: auto; limpahan : auto; margin: auto; kedudukan: mutlak; atas: 0; kiri: 0; bawah: 0; kanan: 0; )

Pusat menggunakan terjemah

Penyelesaian baru di mana digunakan Transformasi CSS. Menyediakan penjajaran mendatar dan menegak:

Pusat ( latar belakang: hsl(180, 100%, 97%); kedudukan: relatif; ketinggian min: 500px; ) .img tengah ( kedudukan: mutlak; atas: 50%; kiri: 50%; ubah: terjemah(-50 %, -50%); lebar: 30%; tinggi: auto; )

Terdapat beberapa kelemahan:

• Sifat transformasi CSS memerlukan awalan penyemak imbas
• Tidak berfungsi dalam versi lama IE (8 dan ke bawah)
• Bekas luar perlu diberi ketinggian.
• Jika terdapat teks di dalam bekas, ia mungkin kabur sedikit.

Pemusatan menggunakan jenis paparan fleksibel

Mungkin pilihan yang paling mudah.

Pusat ( latar belakang: hsl(240, 100%, 97%); paparan: flex; justify-content: center; align-item: center; ) .center img (lebar: 30%; tinggi: auto; )

Tidak berfungsi dalam semua versi IE (walaupun anda boleh melindungi diri anda dengan menggunakan paparan: sel jadual sebagai tambahan). CSS penuh:

Pusat ( latar belakang: hsl(240, 100%, 97%); paparan: -webkit-box; /* Safari, iOS 6 dan versi terdahulu; Android, WebKit */ paparan lama: -moz-box; /* Firefox (mungkin buggy) */ paparan: -ms-flexbox; /* IE 10 */ paparan: -webkit-flex; /* Chrome 21+ */ paparan: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: tengah; -ms-flex-align: tengah; -webkit-align-item: tengah; align-item: tengah; -webkit-box-pack: pusat; -moz-box-pack: tengah; -ms-flex-pack: tengah; -webkit-justify-content: pusat; justify-content: pusat; )

Pemusatan menggunakan calc

Dalam beberapa kes, kaedah ini lebih serba boleh daripada menggunakan flexbox:

Pusat ( latar belakang: hsl(300, 100%, 97%); ketinggian min: 600px; kedudukan: relatif; ) .img tengah ( lebar: 40%; tinggi: auto; kedudukan: mutlak; atas: calc(50% - 20%); kiri: calc(50% - 20%); )

Ia sangat mudah, kita boleh mengira dimensi yang kita perlukan bergantung pada keseluruhan susun atur halaman. Pengiraannya sangat mudah, 50% adalah titik tengah bekas, tetapi tugas kita adalah untuk meletakkan kiri bucu atas Imej. Seterusnya, tolak separuh ketinggian dan lebar imej. Formulanya adalah seperti berikut:

Atas: calc(50% - (40% / 2)); kiri: calc(50% - (40% / 2));

Dalam amalan anda mungkin mendapati itu kaedah ini berfungsi dengan baik jika kita mengetahui saiz elemen:

Img tengah ( lebar: 500px; tinggi: 500px; kedudukan: mutlak; atas:calc(50% - (300px / 2)); kiri: calc(50% - (300px - 2)); )

Kaedah ini disokong oleh Firefox, bermula dari versi 4, anda perlu mendaftar awalan penyemak imbas. Tidak berfungsi dalam IE 8. Kod penuh:

Img tengah ( lebar: 40%; tinggi: auto; kedudukan: mutlak; atas: -webkit-calc(50% - 20%); kiri: -webkit-calc(50% - 20%); atas: -moz-calc (50% - 20%); kiri: -moz-calc(50% - 20%); atas: calc(50% - 20%); kiri: calc(50% - 20%); )

Saya harap kaedah ini cukup untuk anda mencari penyelesaian terbaik untuk diri anda.