Pusat div tetap dengan lebar dinamis (CSS)

90

Saya memiliki div yang akan memiliki CSS ini:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Sekarang, bagaimana cara membuat div ini terpusat? Saya dapat menggunakan margin-left: -450px; left: 50%;tetapi ini hanya akan berfungsi ketika layar> 900 piksel. Setelah itu (ketika jendela <900 piksel), itu tidak lagi berada di tengah.

Tentu saja saya dapat melakukan ini dengan beberapa jenis js, tetapi apakah ada yang "lebih benar" untuk melakukan ini dengan CSS?

css html center gubbfett.dll
sumber
4
@ Liam - Saya tidak setuju, saya pikir pertanyaan ini langsung saja. Pertanyaan-pertanyaan tersebut tidak menjawab pertanyaan ini sehubungan dengan memiliki div dengan lebar tetap di tengah.
Joshua M
Apa yang dikatakan Joshua, itu untuk memusatkan div di yang lain.
gubbfett
7
@Liam - Selanjutnya, Anda tidak dapat menggunakan margin: 0 autopada position: fixeddiv. Apakah Anda membaca pertanyaan itu?
Joshua M
^ tidak. Saya sudah mencobanya juga. : p
gubbfett
3
@Joshua Pernyataan Anda tidak 100% benar. Lihat jawabanku.
laconbass

Jawaban:

226

Anda dapat memusatkan fixedatau absolutemenetapkan elemen yang diposisikan rightdan leftke 0, lalu margin-left& margin-rightke autoseolah-olah Anda sedang memusatkan staticelemen yang diposisikan.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Lihat contoh ini mengerjakan biola ini .

laconbass.dll
sumber
1
Hanya untuk menyebutkan ... Ini tidak terduga, tetapi gagal di IE7. Ini diposisikan 0px dari kiri di sini. Ia bekerja dengan sempurna di IE 8.
gubbfett
Ini tidak berfungsi ketika lebar elemen lebih besar dari lebar layar .. akan menyenangkan jika berfungsi dalam situasi itu.
andrewb
1
@andrewb Anda dapat menerapkan margin yang sama negatifnya pada rightdan leftsetidaknya a value >= witdth / 2, seperti yang terlihat di jsfiddle.net/PvfFy/168 , tetapi bukan merupakan pendekatan yang elegan IMHO. Saya telah mengujinya di chrome untuk bersenang-senang, saya tidak tahu apakah itu akan berfungsi pada sisanya
laconbass
5
Di luar cakupan pertanyaan, ini tergantung pada pengaturan lebar elemen, jadi tidak bagus jika Anda memiliki konten dinamis yang lebarnya bervariasi atau tidak diketahui. Mengesampingkan pemusatan, saya biasanya melakukan itu dengan tampilan: blok-sebaris dan tanpa lebar yang ditetapkan. Apakah ada yang punya solusi no-js untuk kasus itu?
enigment
4
Pertanyaannya mengatakan lebar dinamis , itulah masalahnya, Anda tidak bisa mengabaikannya begitu saja.
Gil Epshtain
56

Berikut metode lain jika Anda dapat menggunakan transformproperti CSS3 dengan aman :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... atau jika Anda menginginkan pemusatan horizontal DAN vertikal:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
Alan Bellows
sumber
5
Selama ini untuk browser modern, ini adalah solusi TERBAIK untuk jawaban ini! Satu-satunya yang seperti benar `float: center', karena Anda dapat mengklik di sekitar elemen pembungkus dan tidak terjebak harus cara ikan di sekitarnya. Suka jawaban ini!
SpYk3HH
1
Hati-hati, jangan gunakan terjemahan dalam persentase ke teks tengah karena akan diperhalus jika nilai yang dihasilkan berupa float. Ho nak, kamu tidak menginginkan itu, tidak kamu tidak.
gnou
Menggunakan transformasi CSS dapat menyebabkan smoothing terjadi pada lebih dari sekedar teks; Saya mendapatkan batas yang funky sebagai hasil dari transformasi.
Nathan K
1
Berpotensi berkontraksi lebih awal saat mengubah ukuran layar (tergantung pada ukuran divisi), mengakibatkan banyak penghuni asrama di sekitar tepi divisi.
Entitas Tunggal
7 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Anda harus membungkusnya dalam wadah. ini cssnya

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
Mathew Berg
sumber
Ah, saya suka pemikiran Anda. Div tetap hanya akan menjadi wadah untuk div lain dengan hasil sebenarnya? Saya akan mencoba yang ini!
gubbfett
Sementara saya menyukai intuisi dari jawaban Anda, saya tidak melihat bagaimana hal itu akan memungkinkan dukungan dari ie6 / 7.
Mathew Berg
1
@MathewBerg, poin bagus tentang ie6 / 7. Dalam hal ini jawaban Anda harus bekerja paling baik. Ini sedikit OT, tetapi secara pribadi saya pikir pengembang tidak boleh menghabiskan waktu untuk memperbaiki barang untuk <= ie7. Saya pikir sebenarnya pengembang harus memblokir browser tersebut untuk memaksa orang dan perusahaan dengan sistem lama untuk meningkatkan. Sungguh sulit untuk menjual ide itu kepada pelanggan yang membayar! ;)
gubbfett
Ya, tapi sayangnya beberapa perusahaan membutuhkan dukungan untuk browser lama tidak peduli seberapa jauh kami akan mendapatkannya di masa depan. Silakan dan terima jawaban saya atau laconbass tergantung pada kebutuhan Anda.
Mathew Berg
1
ini juga tidak berfungsi karena Anda masih tidak dapat mengeklik melalui "wadah"
SpYk3HH