Mutlak Konumlandırılmış Bir Div'de Ortaya Hizala

94

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Div en üstte, ancak onu <center>veya ile ortalayamıyorum margin: 0 auto;

html css xhtml

— Steve
kaynak

152

divAşağıdaki gibi sabit bir genişlik verirseniz probleminiz çözülebilir :

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

— JacobE
kaynak

1

Dikey merkezleme için her zaman aynı tekniği kullanmamıza rağmen neden bunu düşünmediğimi bilmiyorum ... Yine de teşekkürler, bana çok zaman kazandırdın.

— Aayush

1

ya kullanıcı dikey olarak aşağı kaydırırsa, div görünür alanda görünmesi gerekirken sayfanın üst kısmında görünür

— PUG

Overlay div'imde dinamik olarak yeniden boyutlandırılmış resimlerin küçük resimlerini görüntülüyorum, bu yüzden genişliği bilmiyorum.

— PUG

4

bu yalnızca bir geçici çözümdür , stackoverflow.com/questions/1776915/… çözüm gibi görünüyor

— PUG

1

Bu doğru cevap değil. Farklı ortam türleri bu parçacığı desteklemeyecektir.

— Sushan

98

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

— Matheus Oliveira
kaynak

3

Bu nasıl çalışıyor? Cevabınızın neden geçerli olduğunu açıklar mısınız?

— afuzzyllama

1

Bu yöntemi diğerlerine kıyasla% 99 oranında seviyorum, dolgu, sınırlar vb. İle uğraşmak zorunda değilsiniz. Bunun başarısız olduğunu hiç görmedim, bir dahaki sefere sizin için başarısız olursa bir örnek verin.

— Dan

1

Bu çözümle ilgili harika olan şey, yüzdelerle de çalışması, ancak tarayıcılar arası uyumlu olup olmadığından emin olmaması

— maljukan

1

Vay. Bunun işe yaramasını beklemiyordum ama benim için bir cazibe gibi çalıştı

— Awais Umar

4

Bunun doğru cevap olması gerektiğine katılıyorum, -200px marjı bana hack haykırıyor.

— Mani5556

37

Partiye geç kaldığımı biliyorum, ancak burada tam genişliğini bilmediğinizde mutlak bir öğeyi yatay olarak konumlandırması gereken insanlar için bir cevap vereceğimi düşündüm.

Bunu dene:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Aynı teknik, dikey hizalamaya ihtiyaç duyduğunuzda, aşağıdaki gibi özellikleri ayarlayarak da uygulanabilir:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

— Michael Giovanni Pumo
kaynak

1

Whaaat. Bu harika! Nasıl çalıştığını açıklayabilir misin? Düzenleme: Biraz avlandı ve sol gibi görünüyor:% 50 div'in sol konumunu merkeze taşır, ki bu gerçekten merkezde değildir. Ancak translateX, onu içeriğin genişliğinin

— azizj1

2

Mutlak konumlandırma, bir öğenin sol üstünden konumlandırılacaktır. Çeviri kullanmak, onu boyutuna göre miktara kaydırır.

— Michael Giovanni Pumo

3

Michael, sadece bilmeni istedim, parti tomurcuğuna geç kalmadın ... ve bilmeyenler için: dönüştürme: çeviri (-% 50, -% 50); hem dikey hem de yatay merkezlemeyi 1 çizgi ile yapıyor

— Marvel Moe

4

Hem dikey hem de yatay olarak ortalamak için şunu yapın:

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

— Armin
kaynak

1

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Snippet'i genişlet

— panwar
kaynak

Teşekkür ederim. Bu benim için çalışıyor.

— Henrique Van Klaveren

0

Göreli bir genişliğe (yüzde olarak) sahip olmanız gerekiyorsa, div'inizi mutlak konumlandırılmış bir genişliğe kaydırabilirsiniz:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Bir öğeyi mutlak olarak konumlandırmak için, ana öğenin göreceli olarak konumlandırılması gerektiğini unutmayın.

— Dalvallana
kaynak

0

Aynı sorunu yaşıyordum ve sınırlamam önceden tanımlanmış bir genişliğe sahip olamamamdı. Öğenizin sabit bir genişliği yoksa, bunu deneyin

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

sonra html'nizi böyle görünecek şekilde değiştirin

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

— Usman Shaukat
kaynak

0

Veya göreli birimleri kullanabilirsiniz, örneğin

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

— Aliaksei
kaynak

-22

Evet:

div#thing { text-align:center; }

5

Bu, bir div içindeki içeriği hizalayacaktır. Div'i sayfanın ortasına hizalamayacaktır. Ayrıca, kesinlikle konumlandırılmış bir div'i, belge akışının parçası olan içindeki içerikler dışında hiçbir şekilde hizalamayacaktır.

— CarterMan