Başka bir div içine eklenen bir div ortalamak için istiyorum.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

Bu şu anda kullandığım CSS.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Gördüğünüz gibi,kullandığım yaklaşımı şimdi genişlik değerlerini ve innerDiv yüksekliğine bağlıdır.Eğer genişlik/yükseklik değişirse, margin-top ve margin-left değerleri değiştirmek gerekecek.Bu innerDiv her zaman onun büyüklüğü ne olursa olsun merkezi için kullanabileceğiniz genel bir çözüm var mı?

margin:auto kullanarak yatay orta innerDiv allign olduğunu anladım.Ama dikey allign ne orta?

tl;dr

Dikey hizalama orta çalışır, ancak çocuk üzerinde ana öğe table-cell inline-block kullanmak zorunda olacak.

Bu çözüm IE6 ve 7 de işe yaramayacak.
Senin için gitmek için güvenli bir yoldur.
Ama CSS3 ve HTML5 ile soru etiketli beri modern bir çözüm kullanarak sakıncası yoktur diye düşünüyordum.

Klasik çözüm (masa düzeni)

Bu benim orijinal cevap oldu. Ben hala iyi çalışıyor ve geniş bir destek çözümüdür. Tablo-düzen 16 ** daha modern çözümler birini kullanmanızı öneririm.

Here is an example

Test:

• FF3.5
• FF4
• Safari 5
• 11 ve 12 krom
• 9

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Modern çözüm (dönüşüm)

Dönüşümleri fairly well supported now olduğunuz için bunu yapmanın daha kolay bir yolu var.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  display: absolute;
  width: 200px;
  height: 200px;
}

Demo

en modern en sevdiğim çözüm (flexbox) arası yok

Flexbox ve daha fazla kullanmak its also well supported now en kolay şekilde başladım.

CSS

.cn {
  position: flex;
  justify-content: center;
}

.inner {
  align-self: center;
}

Demo

Daha fazla örnek ve olasılıklar: Compare all the methods on one pages