Mutlak şekilde konumlandırılmış eleman merkeze nasıl hizalanır?


108

İki tuvali üst üste yığmaya ve onu çift katmanlı bir tuval yapmaya çalışıyorum.

Burada bir örnek gördüm:

<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>

Ancak her iki tuvali de ekranın ortasına hizalamak istiyorum. Değerini leftsabit olarak ayarlarsam, ekranın yönünü değiştirirken (iPad'de aps yaparken) tuval, nasıl davrandığı gibi ekranın ortasında kalmaz

<div align="center">

Birisi yardım edebilir mi lütfen?

Yanıtlar:


229

Hem sol hem de sağı sıfıra ve sol ve sağ kenar boşluklarını otomatik olarak ayarlarsanız, mutlak konumlandırılmış bir öğeyi ortalayabilirsiniz.

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

Öğeye genişlik de vermeniz gerekmiyor mu?
Gabriel Florit

1
Bu durumda gerekli olduğunu sanmıyorum.
Andrew

Bunu denedim ve işe yarıyor, doğru cevap olarak işaretlenmeli
R Reveley

Nesneyi sabit merkezin dışına taşımak için sol veya sağ değerleri değiştirebilirsiniz. Kullanmak left: 80px;, nesneyi 40px (!) Merkezin sağına hareket ettirir.
SPRBRN

5
Açıklama: Yalnızca stile sahip öğe belirli bir genişliğe sahipse çalışır. (piksel veya%)
Johnny Wong

99

Bir öğeyi genişliğini ve yüksekliğini bilmeden ortaya hizalamak istiyorsanız şunları yapın:

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

Misal:

*{
  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>


18

Kullanmayı denediniz mi?

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

İşe yarayıp yaramayacağından emin değilim ama denemeye değer ...

Küçük düzenleme : Chetan'ın yorumlarında belirtildiği gibi, kenar boşluğu bölümü eklendi ...


Ya bunu denedim, ancak kanvas ortadan "başlıyor" ama ekranın ortasına "yerleştirilmedi". Yine de sola ayarlamak ve tuvali tekrar sola taşımak için% 50 var mı?
PaulLing

2
@PaulLingmargin-left: <negative half the width>
Chetan S

Ne Çetan .. dedi beni alt: P ... gelecek nesiller için benim yanıtı düzenlemek edeceğiz
Deleteman


Tuval öğenizin yarı genişliğini kastetti ..., bu onu margin-left yapacaktır: -50px;
Deleteman


10

bu yöntemi dene, benim için iyi çalışıyor

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

7

Tüm yapman gereken,

üst DIV'nizin konumu olduğundan emin olun: göreli

ve ortalamak istediğiniz eleman, bir yükseklik ve genişlik ayarlayın. aşağıdaki CSS'yi kullanın

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

2
Benim için çalışan tek çözüm. Ebeveyn esnek, esnek büyüme ve taşmaya ayarlanmıştır. Çocuk, ebeveynden daha büyük resimler için çerçevenin dışına yerleştirildi. Ebeveynin genişliğinin farkında değilmiş gibi görünüyordu. Şimdi düzeltildi. Çok teşekkürler!
Kai

0

Üst div'i ortaya taşı

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

İkinci katmanı diğerinin üzerine taşıyın

position: relative;
left: -100px;
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.