tengah menyelaraskan div posisi tetap


127

Saya mencoba mendapatkan div yang memiliki rata position:fixedtengah di halaman saya.

Saya selalu bisa melakukannya dengan div yang benar-benar diposisikan menggunakan "retasan" ini

left: 50%; width: 400px; margin-left:-200px

... di mana nilai margin-left adalah setengah dari lebar div.

Ini tampaknya tidak berfungsi untuk div posisi tetap, melainkan hanya menempatkannya dengan sudut paling kiri pada 50% dan mengabaikan deklarasi margin-kiri.

Adakah ide tentang cara memperbaikinya sehingga saya dapat menyelaraskan tengah elemen posisi tetap?

Dan saya akan memberikan bonus M&M jika Anda dapat memberi tahu saya cara yang lebih baik untuk memusatkan elemen yang diposisikan secara absolut daripada cara yang saya uraikan di atas.


Bekerja untuk saya. Dalam semua kecuali IE6 (jelas).
sejak

@Klik jika Anda dapat memilih jawaban, itu akan membantu pengguna lain mengidentifikasi solusi untuk masalah Anda.
andreihondrari

Jawaban:


202

Jawaban Koen tidak persis memusatkan elemen.

Cara yang tepat adalah dengan menggunakan CCS3 transformproperti. Meskipun tidak didukung di beberapa browser lama . Dan kita bahkan tidak perlu menetapkan tetap atau kerabat width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Bekerja perbandingan jsfiddle di sini .


1
itu sempurna. Saya menggunakan ini untuk aplikasi cordova & diharapkan berjalan di browser utama yang diperbarui :)
saurabh

2
Sangat sederhana tetapi sangat berguna. Terima kasih.
Gilberto Sánchez

Wow terima kasih! Saya telah mencoba untuk memusatkan teks di antara dua div yang tidak rata dan ini adalah satu-satunya yang berfungsi tanpa merusak markup!
Andrey Kaipov

4
Jawaban sebenarnya +1
sn3ll

3
@Alex left: 50%memindahkan div ke 50% halaman. Tetapi Anda harus ingat bahwa itu memindahkannya mulai dari sisi kiri div, oleh karena itu div belum berada di tengah. translate(-50%, 0)yang pada dasarnya translateX(-50%)mempertimbangkan lebar div saat ini dan memindahkannya sebesar -50% dari lebarnya ke sisi kiri dari tempat sebenarnya.
emil.c

168

Untuk yang mengalami masalah yang sama, tetapi dengan desain yang responsif, Anda juga dapat menggunakan:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Melakukan ini akan selalu membuat Anda tetap divterpusat di layar, bahkan dengan desain yang responsif.


2
Ini membantu saya dengan proyek RWD :)
tctc91

6
dari mana 37,5% ini didapat?
aurora

7
@aurora - ini -1/2 dari pengaturan posisi (jadi -(75/2)dalam kasus ini)
Inaimathi

1
Mengapa ini bukan jawaban yang diterima adalah sebuah misteri, itu hanya berfungsi (tm)
CGK

2
Cropis memiliki solusi yang lebih baik
Arnaldo Capo

44

Anda juga bisa menggunakan flexbox untuk ini.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}
<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>


12
mengapa repot-repot menyebutkan center dan align = "center"? text-align: center is the way
wlf

1
Anda harus memasukkan gaya perataan teks ke dalam contoh Anda.
Manatax

Terima kasih banyak! Ini sangat membantu saya!
Joan.bdm

Saya telah mengubah jawaban saya dengan menghapus penyebutan <center>yang tidak digunakan lagi dan dengan menggunakan teknik modern seperti display: flexdan beberapa properti terkait.
andreihondrari

33

Dari postingan di atas, menurut saya cara terbaik adalah

  1. Memiliki div tetap dengan width: 100%
  2. Di dalam div, buat div statis baru dengan margin-left: autodan margin-right: auto, atau untuk tabel membuatnya align="center".
  3. Tadaaaah, Anda telah memusatkan div tetap Anda sekarang

Semoga ini bisa membantu.


2
+1 sangat berguna jika Anda perlu memusatkan div dengan lebar tetap juga. Misalnya 990px.
dcernahoschi

Ini juga satu-satunya cara yang saya tahu untuk mengizinkan max-widths untuk elemen posisi tetap. Anda ingin sidebar tetap yang secara responsif mengambil 30% dari max-width: 1200pxhalaman web Anda ? Ini akan membawamu ke sana.
Michael

7

Div normal harus menggunakan margin-left: autodan margin-right: auto, tetapi itu tidak berfungsi untuk div tetap. Cara menyiasatinya mirip dengan jawaban Andrew , tetapi tidak menggunakan <center>hal yang sudah usang . Pada dasarnya, berikan div tetap sebuah pembungkus.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}
<div id="wrapper">
    <div id="fixed_div"></div>
</div

Ini akan memusatkan div tetap di dalam div sambil memungkinkan div bereaksi dengan browser. yaitu div akan berada di tengah jika ada cukup ruang, tetapi akan bertabrakan dengan tepi browser jika tidak ada; mirip dengan reaksi div terpusat biasa.


4

Jika Anda ingin meratakan tengah div posisi tetap baik secara vertikal maupun horizontal gunakan ini

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

4
<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Ini harus melakukan hal yang sama.


3

Jika Anda tahu lebarnya 400px ini akan menjadi cara termudah untuk melakukannya, saya kira.

 left: calc(50% - 200px);

2

Ini berfungsi jika Anda ingin elemen menjangkau seluruh halaman seperti bilah navigasi lainnya.

width: calc (width: 100% - width apa pun yang tidak berada di tengah)

Misalnya jika bilah navigasi samping Anda adalah 200 piksel:

lebar: kalk (100% - 200 piksel);


1

Cukup mudah menggunakan lebar: 70%; kiri: 15%;

Setel lebar elemen menjadi 70% jendela dan menyisakan 15% di kedua sisi


1

Saya menggunakan yang berikut ini dengan Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

Yaitu membuat elemen lebar penuh yang posisinya tetap, dan hanya mendorong wadah di dalamnya, wadah itu berada di tengah relatif terhadap lebar penuh. Harus bersikap baik secara responsif juga.


0

Sebuah solusi dengan menggunakan kotak fleksibel; sepenuhnya responsif:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

-1

jika Anda tidak ingin menggunakan metode pembungkus. maka Anda bisa melakukan ini:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}
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.