Memposisikan elemen <div> di tengah layar

134

Saya ingin menempatkan elemen <div>(atau a <table>) di tengah layar terlepas dari ukuran layar. Dengan kata lain, ruang kiri di 'atas' dan 'bawah' harus sama dan ruang kiri di sisi 'kanan' dan 'kiri' harus sama. Saya ingin menyelesaikan ini hanya dengan CSS.

Saya sudah mencoba yang berikut tetapi tidak berhasil:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Catatan:
Baik-baik saja jika <div>elemen (atau <table>) bergulir dengan situs web atau tidak. Hanya ingin berada di tengah saat halaman dimuat.

javascript css html

— sumit
sumber

1

kemungkinan duplikat dari Bagaimana menyelaraskan <div> ke tengah halaman

— Purag

Hai Purmou, pertanyaan yang Anda sebutkan jika untuk posisi di tengah halaman, yaitu ruang kiri dan kanan sama - bukan ruang atas dan bawah sama!

— sumit

1

duplikat yang mungkin dari Apa Cara Terbaik Memusatkan Div secara Vertikal dengan CSS

— outis

kemungkinan duplikat dari Bagaimana cara memusatkan div dalam div - secara horizontal?

— bjb568

201

Cara mudah, jika Anda memiliki lebar dan tinggi tetap:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Tolong jangan gunakan gaya sebaris! Berikut ini adalah contoh kerja http://jsfiddle.net/S5bKq/ .

— Einstein
sumber

13

Bagi mereka yang mencari ketinggian dinamis: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 mengapa tidak menggunakan gaya inline? untuk alasan yang sudah diketahui atau ada sesuatu yang lebih yang harus saya ketahui untuk contoh spesifik?

— Sharky

@KatrinRaimond itu untuk alasan yang terkenal, didokumentasikan di sini stackoverflow.com/questions/2612483/… dan di sini webdesign.about.com/od/css/a/aa073106.htm .

— Alex

Tetapi, pengaturan atas divElement di unit '%' membuat divElement membutuhkan ruang vertikal kecuali divElement ditempatkan di dalam elemen relatif.

— sudip

Apakah posisi: tetap atau posisi: absolut?

— Kurkula

151

Dengan transformasi yang semakin didukung di mana-mana hari ini, Anda dapat melakukan ini tanpa mengetahui lebar / tinggi sembulan

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

Mudah! JSFiddle di sini: http://jsfiddle.net/LgSZV/

Pembaruan: Lihat https://css-tricks.com/centering-css-complete-guide/ untuk panduan yang cukup lengkap tentang pemusatan CSS. Menambahkannya ke jawaban ini karena sepertinya mendapatkan banyak bola mata.

— XwipeoutX
sumber

1

Jika konten dalam popup menggunakan overflow:auto, menggulirkan kacau di IE9. :(

— joescii

2

Tidak begitu ubiquos. IE8 masih 20% dari pangsa browser dan tidak mendukungnya . Jadi hanya ambil yang ini untuk IE9 +.

— fotanus

7

+1 untuk menjadi satu-satunya solusi di mana Anda tidak perlu menentukan tinggi dan lebar atau menggunakan Javascript.

— Jan Derk

@ botani ketika pengembang berhenti mendukung IE 9 <pengguna akan bermigrasi atau memperbarui browser mereka.

— Diego Vieira

@DIegoVieira sayangnya ini bukan cara kerjanya. Lihat tragedi milik bersama . Jadi orang akan terus mendukung IE8 karena tidak ingin kehilangan bagian ini, dan orang-orang akan terus menggunakannya karena berfungsi.

— fotanus

33

Atur lebar dan tingginya dan Anda baik-baik saja.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Jika Anda ingin dimensi elemen fleksibel (dan tidak peduli dengan browser lawas), ikuti jawaban XwipeoutX .

— Erik Aigner
sumber

1

Ini adalah jawaban yang paling bersih dan paling sederhana dan juga ramah mobile . +1

— Karat

22

Ini akan bekerja untuk objek apa pun. Bahkan jika Anda tidak tahu ukurannya:

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

— pria bercahaya
sumber

17

Sekarang, lebih mudah dengan HTML 5 dan CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
sumber

12

Jika Anda memiliki posisi tetap divhanya absolut itu di 50% dari atas dan 50% kiri dan margin negatif atas dan kiri masing-masing setengah tinggi dan lebar. Sesuaikan dengan kebutuhan Anda:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
sumber

9

Gunakan fleksibel . Jauh lebih sederhana dan akan berfungsi terlepas dari divukuran Anda :

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Luaskan cuplikan

— Caner
sumber

3

Saya akan melakukan ini dalam CSS:

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

lalu dalam HTML:

<div class="centered"></div>

— Eduardo Lago Aguilar
sumber

0

coba ini

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Atau ini

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
sumber

0

Jika ada orang yang mencari solusi,

Aku menemukan ini,

Ini solusi terbaik yang saya temukan!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Semoga kamu menikmati!

— Christopher Atwood
sumber

0

Pendekatan fleksibel lain yang mudah untuk menampilkan blok di tengah: menggunakan penyelarasan teks asli dengan line-heightdan text-align.

Larutan:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

Dan contoh html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Kami membuat div.parentlayar penuh, dan anak tunggalnya div.childsejajar dengan teks display: inline-block.

Keuntungan:

fleksibilitas, tidak ada nilai absolut
mendukung ukuran
berfungsi dengan baik di ponsel

Contoh sederhana tentang JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
sumber

0

Solusi alternatif yang tidak menggunakan posisi absolut:
Saya melihat banyak posisi jawaban absolut. Saya tidak dapat menggunakan posisi absolut tanpa merusak sesuatu yang lain. Jadi bagi mereka yang tidak bisa juga, inilah yang saya lakukan:
https://stackoverflow.com/a/58622840/6546317 (diposting sebagai tanggapan atas pertanyaan lain).

Solusinya hanya berfokus pada pemusatan vertikal karena elemen anak-anak saya sudah terpusat secara horizontal tetapi hal yang sama dapat diterapkan jika Anda tidak dapat memusatkannya secara horizontal dengan cara lain.

— reddtorik
sumber

-2

coba ini:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— pengguna3423956
sumber

2

Ini sama dengan jawaban yang diterima

— apaul

ya, tapi di sini saya jelaskan pengoperasian margin atas dan kiri ... seseorang tidak tahu ini ....

— user3423956

1

Maka secara efektif sama dengan jawaban kedua

— apaul