Hai Saya menggunakan sesuatu yang mirip dengan yang berikut ini untuk mendapatkan posisi div di tengah layar:
<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>
Namun masalah dengan ini adalah ia menempatkan item di tengah halaman bukan layar. Jadi jika halaman itu beberapa layar tinggi dan saya di bagian atas halaman (bagian atas bagian ditampilkan di layar) ketika saya membuat div muncul itu bahkan tidak di layar. Anda harus menggulir ke bawah untuk melihatnya.
Bisakah seseorang tolong beri tahu saya bagaimana Anda membuatnya muncul di tengah layar?
<br />
sebelum mencoba dan menekannya. Mungkin coba periksa sisa kode Anda untuk melihat apakah Anda memiliki sesuatu yang terlalu menulis nilai DIV atau yang mempengaruhi DIV Anda untuk menyebabkan masalah ini.Jawaban:
cukup tambahkan
position:fixed
dan itu akan tetap terlihat bahkan jika Anda gulir ke bawah. lihat di http://jsfiddle.net/XEUbc/1/sumber
Saya pikir ini adalah solusi sederhana:
sumber
Gunakan transform;
Solusi Javascript:
sumber
Taruh saja
margin:auto;
sumber
Coba yang ini.
sumber
Ini berhasil untuk saya
sumber
Jawaban singkat, Cukup tambahkan
position:fixed
dan itu akan menyelesaikan masalah Andasumber
sumber
Nah, di bawah ini adalah contoh kerja untuk ini.
Ini akan menangani posisi tengah jika Anda mengubah ukuran halaman web atau memuat dalam ukuran apa pun.
Dalam contoh di atas memuat div akan selalu di tengah.
Berharap ini akan membantu Anda :)
sumber
Dua cara untuk menempatkan tag di tengah layar atau tag induknya:
Menggunakan posisi:
Atur tag induk
position
kerelative
(jika tag target memiliki tag induk) dan kemudian atur gaya tag target seperti ini:Menggunakan flex:
Gaya tag induk akan terlihat seperti ini:
sumber
Di halaman skrip Anda ...
Gunakan a-middle class di Div ...
sumber
sumber
MENGGUNAKAN FLEX
sumber
sumber
Untuk ini, Anda harus mendeteksi ukuran layar. Itu tidak mungkin dengan CSS atau HTML; Anda butuh JavaScript. Berikut adalah entri Pusat Pengembang Mozilla di properti jendela https://developer.mozilla.org/en/DOM/window#Properties
Deteksi ketinggian dan posisi yang tersedia sesuai.
sumber