Merkezi konumu:sabit element

SORU

5 Ocak 2010, Salı

Merkezi konumu:sabit element

position: fixed; bir pop-up kutusu dinamik genişlik ve yükseklik ile ekrana ortalanmış yapmak istiyorum. Bunun için margin: 5% auto; kullandım. position: fixed; olmadan yatay olarak güzel, ama dikey olarak ortalar. position: fixed;, ekledikten sonra bile yatay olarak ortalama değil.

İşte tam set:

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

Nasıl CSS ile ekranda bu kutuyu merkezi muyum?

CEVAP

5 Ocak 2010, Salı

Temelde 50% top left sayı sol üst köşesindeki merkezi kurmamız gerekiyor. Ayrıca div yüksekliğini olumsuz yarısına margin-top margin-left kurmamız gerekiyor ve div ortalarına doğru merkezini kaydırma genişliği.

Böylece, sağlanan <!DOCTYPE html> (standards mode), mevcut yerine margin: 5% auto;:

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

Ya da, eğer düşünmüyorsun ortalama dikey ve eski tarayıcılar gibi IE6/7, o zaman senin yerine de Ekle left: 0 right: 0 öğeye sahip bir margin-left margin-right auto, böylece sabit olarak yerleştirilmiş bir öğe olan bir sabit genişlik bilir nerede onun sol ve sağ uzaklıklar başlayın. Senin durumunda bu