Bagaimana cara menyelaraskan elemen yang benar-benar diposisikan ke tengah?

104

Saya mencoba untuk menumpuk dua kanvas bersama-sama dan menjadikannya kanvas lapisan ganda.

Saya telah melihat contoh di sini:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Tapi saya ingin mengatur kedua kanvas sejajar di tengah layar. Jika saya menetapkan nilai leftsebagai konstanta, sementara saya mengubah orientasi layar (seperti yang saya lakukan aps di iPad) kanvas tidak akan tetap berada di tengah layar seperti bagaimana tindakannya di

<div align="center">

Apakah ada yang bisa membantu?

css html5-canvas

— PaulLing
sumber

223

Jika Anda menyetel kiri dan kanan ke nol, dan margin kiri dan kanan ke otomatis, Anda dapat memusatkan elemen yang diposisikan secara absolut.

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

— Andrew
sumber

Bukankah Anda juga perlu memberi elemen itu lebar?

— Gabriel Florit

1

Saya tidak berpikir itu perlu dalam kasus ini.

— Andrew

Baru saja mencoba ini dan berhasil, itu harus ditandai sebagai jawaban yang benar

— R Reveley

Anda dapat menggunakan perubahan nilai kiri atau kanan untuk memindahkan objek keluar dari tengah, tetap. Menggunakan left: 80px;akan memindahkan objek 40px (!) Ke kanan tengah.

— SPRBRN

5

Catatan: Hanya berfungsi jika elemen yang diberi gaya memiliki lebar tertentu. (baik px atau%)

— Johnny Wong

95

Jika Anda ingin meratakan tengah elemen tanpa mengetahui lebar dan tingginya lakukan:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Contoh:

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>

Luaskan cuplikan

— Vinicius Santana
sumber

16

Sudahkah Anda mencoba menggunakan ?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

Tidak yakin apakah itu akan berhasil, tetapi patut dicoba ...

Pengeditan kecil : Menambahkan bagian kiri margin, seperti yang ditunjukkan pada komentar oleh Chetan ...

— Deleteman
sumber

Ya saya sudah mencoba ini, tetapi kanvas "mulai" dari tengah tetapi tidak "ditempatkan" di tengah layar. Apakah ada cara untuk menyetel ke kiri: 50% dan memindahkan kanvas ke kiri lagi?

— PaulLing

2

@PaulLingmargin-left: <negative half the width>

— Chetan S

Apa yang Chetan katakan .. mengalahkan saya untuk itu: P Saya akan mengedit tanggapan saya untuk generasi mendatang ...

— Deleteman

Lebar layar berbeda saat iPad ditempatkan dalam orientasi berbeda

— PaulLing

Maksudnya setengah lebar elemen kanvas Anda ..., itu akan membuatnya margin-left: -50px;

— Deleteman

14

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

— Mihai Ciobanu
sumber

10

coba metode ini, bekerja dengan baik untuk saya

position: absolute;
left: 50%;
transform: translateX(-50%);

— subindas pm
sumber

7

Yang harus Anda lakukan adalah,

pastikan DIV orang tua Anda memiliki posisi: relatif

dan elemen yang Anda inginkan di tengah, setel tinggi dan lebarnya. gunakan CSS berikut

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
  }
http://jsbin.com/aXEZUgEJ/1/

— BAJA
sumber

2

Hanya solusi yang berhasil untuk saya. Induk disetel ke flex, flex-grow & overflow. Anak diposisikan di luar bingkai untuk gambar yang lebih besar dari induknya. Tampaknya tidak menyadari lebar induknya. Sudah diperbaiki sekarang. Terima kasih banyak!

— Kai

0

Pindahkan div induk ke tengah dengan

left: 50%;
top: 50%;
margin-left: -50px;

Pindahkan lapisan kedua di atas yang lain dengan

position: relative;
left: -100px;

— Spencer
sumber