CSS horizontal centering dari div tetap?


183
#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

Saya tahu pertanyaan ini jutaan kali di luar sana, namun saya tidak dapat menemukan solusi untuk kasus saya. Saya punya div, yang harus diperbaiki di layar, bahkan jika halaman tersebut digulirkan harus selalu BERDIRI di tengah layar!

Div harus memiliki 500pxlebar, harus 30pxjauh dari atas (margin-top), harus dipusatkan secara horizontal di tengah halaman untuk semua ukuran browser dan tidak boleh bergerak ketika menggulir sisa halaman.

Apakah itu mungkin?


Jawaban:


167
left: 50%;
margin-left: -400px; /* Half of the width */

25
itu tidak berfungsi seperti yang dimaksudkan ketika Anda mengubah ukuran jendela browser.

3
@Bahodir: Apakah Anda yakin? Tampaknya tepat untuk saya di resize. Saya pikir ini -400disebabkan oleh lebar div yang diatur ke 800.
Merlyn Morgan-Graham

1
@ PrestonBadeer - Seperti pertanyaan yang ditanyakan?
Quentin

3
Sepenuhnya setuju - ini BUKAN solusi! Jangan pernah membuat kode sesuatu dengan cara ini. -1
Nate I

3
Saya telah memilih ini BUKAN karena itu adalah jawaban yang buruk untuk hari itu - itu adalah jawaban yang baik, tetapi karena tidak lagi, dan jawaban tertinggi berikutnya membutuhkan semua bantuan yang bisa dilihat sebagai jawaban terbaik SEKARANG. Quentin: Saya pikir itu akan menjadi ide yang baik untuk mengedit dalam komentar untuk efek itu dalam jawaban itu sendiri - Saya kemudian akan membalikkan suara saya.
Nick Rice

547

Jawaban di sini sudah usang. Sekarang Anda dapat dengan mudah menggunakan transformasi CSS3 tanpa hardcoding margin . Ini berfungsi pada semua elemen, termasuk elemen tanpa lebar atau lebar dinamis.

Pusat horisontal:

left: 50%;
transform: translateX(-50%);

Pusat vertikal:

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

Baik horisontal maupun vertikal:

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

Kompatibilitas bukan masalah: http://caniuse.com/#feat=transforms2d


86
+1 Jawaban ini menunjukkan masalah dengan stackoverflow: Jawaban lama yang baik untuk zaman mereka dan diterima dengan benar dapat duduk dengan bangga di atas memberikan kesan mereka masih sesuai, sementara jawaban yang bagus untuk dunia yang lebih baru, seperti ini, harus berjuang melawan rintangan.
Nick Rice

10
@NickRice 100% setuju. Jawaban ini harus menjadi jawaban yang baru diterima. Pengembang muda seharusnya tidak melihat jawaban yang diterima saat ini!
Nate I

2
@matt, tolong terima saja yang ini. Gulir jauh ke panjang untuk melihat ini.
ssbb

4
Ini membuat efek blur dalam bayangan kotak di elemen konten.
rab

4
Ya, Chrome salah mengaburkan konten yang diubah. Teks juga kabur. Tapi ini adalah satu-satunya solusi agar elemen tetap terpusat tanpa hardcoding dan menggunakan elemen wrapper. Jika Anda tidak peduli dengan peristiwa penunjuk latar belakang, Anda dapat mencapai efek yang sama dengan pembungkus layar penuh dan kotak fleksibel, atau solusi @ salomvary di bawah ini.
Maciej Krawczyk

58

Jika menggunakan inline-blok adalah opsi, saya akan merekomendasikan pendekatan ini:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

Saya menulis posting singkat tentang ini di sini: http://salomvary.github.com/position-fixed-horizontally-centered.html


1
10x, ini bekerja dengan baik bagi saya tanpa harus widthmenuliskan kode angka apa pun untuk atau sesuatu - tidak seperti @Quentins jawab
Yatharth Agarwal

30

Sunting September 2016: Meskipun menyenangkan untuk mendapatkan pemungutan suara sesekali untuk ini, karena dunia telah berubah, sekarang saya akan menjawab dengan jawaban yang menggunakan transform (dan yang memiliki banyak suara positif). Saya tidak akan melakukannya dengan cara ini lagi.

Cara lain untuk tidak harus menghitung margin atau membutuhkan sub-kontainer:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

@ Joey Apa yang dilakukan bagian bawah: 0? yaitu mengapa dibutuhkan? (Sudah beberapa waktu sejak saya melihat ini!)
Nick Rice

bottom:0akan memastikan menu selalu berpusat vertikal, tapi saya melihat sekarang bukan itu yang diminta OP. :)
Jordan H

Saya mencoba untuk menggunakan ini dalam konteks yang berbeda dan menemukan itu tidak berpusat pada FF jika tinggi elemen lebih tinggi dari jendela (viewport) tinggi
Philipp Werminghausen

Karena dunia telah bergerak, saya sekarang akan pergi dengan jawaban yang menggunakan transformasi. (Saya membuat komentar ini sebelumnya, merujuk nama yang digunakan penjawab - tetapi mereka mengubah nama itu sehingga komentar saya tidak lagi masuk akal dan saya menghapusnya - hanya mencari di halaman ini sebagai gantinya.)
Nick Rice

7

Dimungkinkan untuk memusatkan div dengan cara ini:

html:

<div class="container">
    <div class="inner">content</div>
</div>

css:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

Dengan menggunakan cara ini Anda akan selalu memusatkan blok batin Anda, selain itu dapat dengan mudah diubah menjadi responsif sejati (dalam contoh itu akan hanya cair pada layar yang lebih kecil), oleh karena itu tidak ada batasan seperti pada contoh pertanyaan dan dalam jawaban yang dipilih .


5

... atau Anda dapat membungkus menu Anda dengan yang lain:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

5

Berikut solusi dua-div lainnya. Mencoba untuk membuatnya singkat dan tidak dikodekan. Pertama, html yang diharapkan:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

Prinsip di balik css berikut ini adalah memposisikan beberapa sisi "luar", kemudian gunakan fakta bahwa ia mengasumsikan ukuran "dalam" untuk secara relatif menggeser yang terakhir.

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

Pendekatan ini mirip dengan Quentin, tetapi bagian dalam bisa dari ukuran variabel.


-1

Inilah solusi flexbox saat menggunakan div pembungkus layar penuh. justify-content centre itu child div secara horizontal dan sejajarkan-pusat item itu secara vertikal.

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.