Pusatkan posisi: elemen tetap

439

Saya ingin membuat position: fixed;kotak popup yang berada di tengah layar dengan lebar dan tinggi yang dinamis. Saya menggunakan margin: 5% auto;ini. Tanpa position: fixed;itu pusat baik-baik saja secara horizontal, tetapi tidak secara vertikal. Setelah menambahkan position: fixed;, itu bahkan tidak memusatkan secara horizontal.

Inilah set lengkap:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Luaskan cuplikan

Bagaimana cara memusatkan kotak ini di layar dengan CSS?

css css-position centering saturngod
sumber

Jawaban:

606

Pada dasarnya anda perlu set topdan leftuntuk 50%ke pusat sudut kiri-atas div. Anda juga perlu mengatur margin-topdan margin-leftke setengah negatif dari tinggi dan lebar div untuk menggeser pusat ke tengah div.

Jadi, asalkan <!DOCTYPE html>(mode standar), ini harus dilakukan:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Atau, jika Anda tidak peduli tentang centering vertikal dan browser lama seperti IE6 / 7, maka Anda dapat gantinya juga menambahkan left: 0dan right: 0ke elemen memiliki margin-leftdan margin-rightdari auto, sehingga unsur diposisikan tetap memiliki lebar tetap tahu mana yang kiri dan mulai offset kanan. Dalam kasus Anda demikian:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Sekali lagi, ini hanya berfungsi di IE8 + jika Anda peduli tentang IE, dan ini hanya memusatkan secara horizontal tidak secara vertikal.

BalusC
sumber
8
Saya menemukan trik itu di css-tricks.com/… . Tapi ketika saya mengubah lebar dan tinggi, itu bukan pusat bergerak. Ya, saya harus mengubah margin-kiri dan atas saat mengubah tinggi dan lebar.
saturngod
2
FYI: ini akan menempatkan posisi dengan benar di tengah, tetapi sayangnya Anda kehilangan bilah-bilah gulir Anda - konten apa pun yang terpotong oleh viewport tidak akan dapat dijangkau, bahkan jika Anda menggulir, karena posisi tetap didasarkan pada viewport, bukan pada halaman. Sejauh ini, satu-satunya solusi yang saya temukan adalah dengan javascript.
Groxx
3
Groxx Saya pikir Anda bisa meletakkan bilah gulir di dalam div di pop up menggunakan properti overflow .
David Winiecki
1
Selain itu, untuk yang ini Anda perlu tahu lebar elemen.
Hector Ordonez
2
ah. nm kalau itu masalahnya, maksud saya tentu saja ukuran browser akan dinamis, tidak yakin mengapa itu dalam pertanyaan. alih-alih saya pikir maksudnya dimensi popup harus dinamis. Itulah yang terjadi pada saya jadi saya menggunakan transform: translate (-50%, -50%); berfungsi dengan baik kecuali tidak pada IE8.
malam
324

Saya ingin membuat kotak popup yang berada di tengah layar dengan lebar dan tinggi dinamis.

Berikut adalah pendekatan modern untuk memusatkan elemen secara horizontal dengan lebar dinamis - ini bekerja di semua browser modern; dukungan dapat dilihat di sini .

Contoh yang Diperbarui

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Untuk pemusatan vertikal dan horizontal Anda dapat menggunakan yang berikut:

Contoh yang Diperbarui

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

Anda mungkin ingin menambahkan lebih banyak properti awalan vendor juga (lihat contoh).

Josh Crozier
sumber
1
Saya menggunakan pendekatan ini untuk memusatkan secara horizontal gambar yang diposisikan tetap yang lebarnya lebih besar dari lebar jendela dan berfungsi minimal di Firefox, Chrome, IE 11, dan versi Edge saat ini.
jelhan
1
Dalam pengujian saya ini bekerja dengan sangat baik (di belakang awalan), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad & Chrome Safari, Android 4.4+ Chrome. Satu-satunya kegagalan bagi saya adalah Android 4.0 di mana terjemahan tidak terjadi.
danjah
2
@ ahnbizcad, ini berfungsi di browser desktop seperti Chrome 61, Safari 11 dan FireFox 65, tetapi tidak di Chrome 61 di Android 6, jawaban yang diterima bekerja di semua browser.
Erik Barke
5
Ini membuat gambar buram di Chrome.
Tomasz P. Szynalski
1
Entah bagaimana hanya pendekatan yang berfungsi baik di semua browser dengan img saya. Terima kasih banyak!
Kugelfisch
136

Atau cukup tambahkan left: 0dan right: 0ke CSS asli Anda, yang membuatnya berperilaku mirip dengan elemen tidak tetap reguler dan teknik margin otomatis biasa berfungsi:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Perhatikan bahwa Anda perlu menggunakan HTML (X) yang valid DOCTYPEagar berperilaku dengan benar di IE (yang tentu saja harus Anda miliki ..!)

Will Prescott
sumber
2
Dalam arti apa? Elemen induk adalah elemen tubuh, yang tidak memiliki batas. Jika Anda menambahkan properti border ke tubuh (?!) Maka yakin itu akan terpengaruh, seperti halnya teknik 50% yang saya bayangkan. Saya yakinkan Anda itu berfungsi dengan baik dengan parameter yang diberikan, hanya diverifikasi di setiap browser yang saya miliki, dan memiliki manfaat tambahan karena tidak tergantung pada lebar elemen.
Will Prescott
5
Yang saya lakukan adalah menambahkan 2 properti dan doctype ke contoh HTML OP. Namun pada pengujian lebih lanjut tampaknya bahwa IE7 (atau 8 dalam mode compat) adalah masalahnya - tampaknya tidak menghormati nilai rightproperti jika leftjuga diatur! ( msdn.microsoft.com/en-us/library/... mencatat itu leftdan righthanya memiliki dukungan "parsial" di IE7). OK, saya mengakui solusi ini tidak baik jika dukungan IE7 penting, tetapi trik yang bagus untuk diingat untuk masa depan :)
Will Prescott
7
ini harus menjadi jawaban yang diterima. Saya memiliki dua posisi tetap satu untuk topeng opacity lainnya untuk modal. ini adalah satu-satunya cara saya bisa memusatkan modal posisi tetap di tengah layar. Jawaban yang luar biasa siapa yang akan berpikir?
Chris Hawkes
3
Saya setuju, ini harus menjadi jawaban yang diterima. Ia bekerja dengan sempurna dalam desain responsif juga, karena tidak tergantung pada lebar.
Hector Ordonez
7
Saya akan menyarankan untuk menyederhanakan jawaban, karena beberapa css hanya relevan untuk OP. Yang Anda butuhkan adalah posisi: tetap; kiri: 0; kanan: 0; margin: 0 otomatis; .
Hector Ordonez
23

Tambahkan wadah seperti:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Kemudian masukkan kotak Anda ke div ini akan melakukan pekerjaan.

Romulus Urakagi Ts'ai
sumber
"text-align: center" tidak berfungsi untuk saya dalam memusatkan div internal.
nima
2
Kotak internal perlu agar display: inline-blockini berfungsi. (Beberapa nilai tampilan lain mungkin juga berfungsi, seperti table.)
Brilliand
pendekatan yang lebih baik untuk css yang disebutkan di atas akan menambah margin:auto;dan mengubah lebar ke width:50%atau width:400px. maka isinya bisa berupa teks lurus, elemen blok, atau elemen inline.
Joshua Burns
20

Cukup tambahkan:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Bob
sumber
1
Ini tidak berhasil position: fixed, yang menjadi pertanyaan adalah pertanyaannya. Jika saya salah, harap edit jawaban Anda untuk menyertakan cuplikan kode yang dapat dijalankan.
Flimm
1
berfungsi dengan baik dengan posisi tetap.
Phuhui
1
Ini bekerja dengan position: fixed, asalkan mengatur max-widthatau widthke elemen.
Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

di dalamnya bisa berupa elemen dengan lebar diffenet, tinggi atau tanpa. semua terpusat.

praffessorr
sumber
5

Solusi ini tidak mengharuskan Anda untuk menentukan lebar dan tinggi untuk div popup Anda.

http://jsfiddle.net/4Ly4B/33/

Dan alih-alih menghitung ukuran popup, dan minus setengah ke atas, javascript mengubah ukuran popupContainer untuk mengisi seluruh layar ...

(Tinggi 100%, tidak berfungsi saat menggunakan tampilan: table-cell; (yang diperlukan untuk memusatkan sesuatu secara vertikal)) ...

Pokoknya itu bekerja :)

BjarkeCK
sumber
4 
left: 0;
right: 0;

Tidak bekerja di bawah IE7.

Diubah menjadi 

left:auto;
right:auto;

Mulai bekerja tetapi di peramban lainnya berhenti berfungsi! Jadi gunakan cara ini untuk IE7 di bawah ini

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
jatinder
sumber
Apakah Anda keberatan mengedit jawaban Anda untuk menyertakan seluruh solusi?
Flimm
Ini tidak akan berfungsi tanpa margin otomatis di sisi kiri dan kanan.
RoM4iK
2

Anda pada dasarnya dapat membungkusnya menjadi lain divdan set positionke fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
Luaskan cuplikan

Abdulla Dlshad
sumber
2

Saya menggunakan vw(lebar viewport) dan vh(tinggi viewport). viewport adalah seluruh layar Anda. 100vwadalah total lebar layar Anda dan 100vhtotal tinggi.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
Aseem
sumber
1

Untuk memperbaiki posisi gunakan ini:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
HeadAndTail
sumber
3
Harap berikan penjelasan tentang mengapa solusi Anda akan berfungsi untuk pertanyaan yang diposting.
Shekhar Chikara
0

Satu jawaban yang mungkin :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
Martin Vahi
sumber
Ini tampaknya berhasil, meskipun Anda harus sudah mengetahui lebar dan tinggi elemen.
Flimm
0

Coba gunakan ini untuk elemen horisontal yang tidak akan memusat dengan benar.

lebar: calc (lebar: 100% - lebar apa pun yang tidak terpusat itu )

Misalnya jika bilah navigasi sisi Anda berukuran 200px:

width: calc(100% - 200px);
Robert Ross
sumber
0

Saya hanya menggunakan sesuatu seperti ini:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Ini memusatkan kotak dialog baik secara horizontal dan vertikal untuk saya, dan saya dapat menggunakan lebar dan tinggi yang berbeda untuk menyesuaikan resolusi layar yang berbeda untuk membuatnya responsif, dengan pertanyaan media.

Bukan opsi jika Anda masih perlu memberikan dukungan untuk peramban tempat properti khusus CSS atau calc()tidak didukung (periksa di caniuse.)

Fabien Snauwaert
sumber
0

Yang ini bekerja paling baik untuk saya:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
Flafy
sumber
-13

Satu-satunya solusi sangat mudah adalah dengan menggunakan tabel align = center seperti pada:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Saya tidak percaya orang di seluruh dunia menyia-nyiakan jumlah yang berlebihan ini untuk waktu yang konyol untuk menyelesaikan masalah mendasar seperti memusatkan div. solusi css tidak berfungsi untuk semua browser, solusi jquery adalah solusi komputasi perangkat lunak dan bukan opsi untuk alasan lain.

Saya telah membuang waktu terlalu banyak untuk menghindari menggunakan meja, tetapi pengalaman mengatakan kepada saya untuk berhenti melawannya. Gunakan tabel untuk div centering. Bekerja setiap saat di semua browser! Jangan khawatir lagi.

Cheong
sumber
11
Ini sama sekali tidak menjawab pertanyaan. Tidak ada yang setara dengan non-CSS position:fixed.
Brilliand