Pertanyaan Posisikan div absolut di tengah tampilan layar


Saya ingin menempatkan div yang memiliki posisi absolut di tengah tampilan layar (digulir atau tidak digulir).

Saya memiliki ini tetapi tempatnya div di pertengahan dokumen dan tidak pertengahan tampilan saat ini.

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-70px;
    margin-top:-50px;   
}

38
2017-12-16 16:56


asal


Jawaban:


Perubahan position:absolute untuk position: fixed dan Anda harus pergi dengan baik!

Ketika Anda mengatakan posisi - mutlak, div referensi adalah div tua yang memiliki posisi - relatif. Namun jika Anda mengatakan posisi-diperbaiki, referensi adalah jendela browser. yang merupakan wat yang Anda inginkan dalam kasus Anda.

Dalam kasus IE6 saya kira Anda harus menggunakan Ekspresi CSS


41
2017-12-16 16:59



Gunakan CSS berikut:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

26
2018-04-07 04:35



Sejak CSS calc() didukung oleh semua browser sekarang, di sini solusi menggunakan calc().

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: calc(50vh - (/* height */100px / 2));
    left: calc(50vw - (/* width */140px / 2)); 
}

9
2017-08-31 15:54



Cara yang sedikit lebih rumit adalah menggunakan banyak kotak luar. Metode ini berfungsi dengan baik dengan atau tanpa harddisk dengan lebar / tinggi dari kotak tengah (warna latar belakang ditambahkan hanya untuk menunjukkan apa yang masing-masing kotak lakukan):

/* content of this box will be centered horizontally */
.boxH
{
  background-color: rgba(0, 127, 255, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* content of this box will be centered vertically */
.boxV
{
  background-color: rgba(255, 0, 0, 0.2);
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* content of this box will be centered horizontally and vertically */
 .boxM
{
  background-color: lightblue;
  padding: 3em;
}
<div>
  some text in the background
</div>
<div class="boxH">
  <div class="boxV">
    <div class="boxM">
      this div is in the middle
    </div>
  </div>
</div>

https://jsfiddle.net/vanowm/7cj1775e/

Jika Anda ingin menampilkan div di bagian tengah terlepas dari posisi gulir, maka ubah position untuk fixed


2
2018-02-04 00:43



margin-left: -half_of_the_div;
left: 50%;
position: fixed;

contoh pada codepen


-3
2017-11-05 19:20