Metin içeren bir div etiketi var, ve bu div içeriğini dikey olarak ortala istiyorum.

İşte benim stilim div:

#box
{
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Bunu yapmak için en iyi yolu nedir?

Bu temel yaklaşım deneyebilirsiniz:

#box {
  height: 90px;
  line-height: 90px;
}

Demo

Çalışır, tek satırlık bir metin kutusu içeren bir unsur olarak aynı yükseklik için satır yüksekliği ayarlayın çünkü ama, sadece.

Daha çok yönlü bir yaklaşım

Ve işte metin dikey olarak hizalamak için başka bir yol, bu çözüm, tek bir metin satırı ve birden fazla satır için çalışacak, ama yine de sabit yükseklikte bir kap gerektirir:

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

CSS sadece boyutları <div> dikey merkezine hizalar <span> ayar <div>'nin line-height eşit yüksekliği ve yapım <span> sıralı blok vertical-align: middle. Sonra içeriğini doğal olarak bloğun içine akar böylece line-height normale döndü <span> için ayarlar.

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

Demo

Taklit tablosu görüntüleme

Ve burada eski çalışmayabilir başka bir seçenek browsers that don't support display: table and display: table-cell (temelde bu demektir Internet Explorer 7). HTML, ikinci örnekte olduğu gibi aynı

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Kullanıyoruz '' tablo dikey hizalama desteği beri davranış görüntüleme: benzetin . CSS

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

Demo

Mutlak konumlandırma kullanarak

Bu teknik konumlandırılmış bir öğe ayarı üst, alt ve 0 Sağ Sol kullanır. article on Smashing Magazine bir daha ayrıntılı bir şekilde açıklanmıştır.