tengah menyelaraskan div posisi tetap

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.

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 .

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.

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>

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.

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.

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%);

<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.

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

 left: calc(50% - 200px);

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);

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

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

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.

Sebuah solusi dengan menggunakan kotak fleksibel; sepenuhnya responsif:

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

child_div {
    /* whatever you want */
}

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 */
}