Cara memposisikan div di tengah layar saat halaman lebih besar dari layar

141

Hai Saya menggunakan sesuatu yang mirip dengan yang berikut ini untuk mendapatkan posisi div di tengah layar:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

Namun masalah dengan ini adalah ia menempatkan item di tengah halaman bukan layar. Jadi jika halaman itu beberapa layar tinggi dan saya di bagian atas halaman (bagian atas bagian ditampilkan di layar) ketika saya membuat div muncul itu bahkan tidak di layar. Anda harus menggulir ke bawah untuk melihatnya.

Bisakah seseorang tolong beri tahu saya bagaimana Anda membuatnya muncul di tengah layar?

— Coder 2
sumber

Saya baru saja menguji kode yang tepat pada halaman pengujian dan itu memusatkan div sempurna pada halaman, bahkan dengan sekitar 100 <br />sebelum mencoba dan menekannya. Mungkin coba periksa sisa kode Anda untuk melihat apakah Anda memiliki sesuatu yang terlalu menulis nilai DIV atau yang mempengaruhi DIV Anda untuk menyebabkan masalah ini.

— Eli

269

cukup tambahkan position:fixeddan itu akan tetap terlihat bahkan jika Anda gulir ke bawah. lihat di http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— Hussein
sumber

1

Anda adalah penyelamat hidup .. Solusi sederhana berfungsi dengan baik bahkan jika elemen telah mengubah skala yang diterapkan ..

— Vinnie

91

Saya pikir ini adalah solusi sederhana:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

Luaskan cuplikan

— pengguna2684935
sumber

7

pendekatan ini jauh lebih baik daripada jawaban yang disetujui

— Viacheslav Dobromyslov

2

Saya suka yang ini, tetapi apakah ini berfungsi di browser "lama"?

— BernaMariano

14

Gunakan transform;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Solusi Javascript:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— Erdogan
sumber

5

Taruh saja margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

Coba yang ini.

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

— Chandan Sharma
sumber

1

Saya pikir ini lebih berguna karena Anda tidak perlu menerapkan gaya apa pun ke elemen induk.

— canbax

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Ini berhasil untuk saya

— Abraham
sumber

2

Meskipun secara teknis ini mungkin benar, Anda ingin memasukkan deskripsi singkat tentang mengapa ini memecahkan masalah untuk konteks

— drneel

2

Jawaban singkat, Cukup tambahkan position:fixeddan itu akan menyelesaikan masalah Anda

— Parth
sumber

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— Maitrey Malve
sumber

Pertanyaan itu ditanyakan kepada saya dalam wawancara "bagaimana Anda menyelaraskan pusat div layar?"

— Maitrey Malve

1

Nah, di bawah ini adalah contoh kerja untuk ini.

Ini akan menangani posisi tengah jika Anda mengubah ukuran halaman web atau memuat dalam ukuran apa pun.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Luaskan cuplikan

Dalam contoh di atas memuat div akan selalu di tengah.

Berharap ini akan membantu Anda :)

— Vikash Pandey
sumber

1

Dua cara untuk menempatkan tag di tengah layar atau tag induknya:

Menggunakan posisi:

Atur tag induk positionke relative(jika tag target memiliki tag induk) dan kemudian atur gaya tag target seperti ini:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Menggunakan flex:

Gaya tag induk akan terlihat seperti ini:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— Alex Jolig
sumber

0

Di halaman skrip Anda ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Gunakan a-middle class di Div ...

   <div class="a-middle">

— Antony Jack
sumber

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Luaskan cuplikan

— Lăng Minh
sumber

-1

MENGGUNAKAN FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
sumber

Ini memusatkan konten ke elemen atau halaman induk, bukan layar.

— Sean

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— LukASh
sumber

Tambahkan beberapa penjelasan

— Pankaj Makwana

-4

Untuk ini, Anda harus mendeteksi ukuran layar. Itu tidak mungkin dengan CSS atau HTML; Anda butuh JavaScript. Berikut adalah entri Pusat Pengembang Mozilla di properti jendela https://developer.mozilla.org/en/DOM/window#Properties

Deteksi ketinggian dan posisi yang tersedia sesuai.

— Scott Radcliff
sumber