( Ve ) diviçin bir kümem var ve içinde bazı metinler var.display:block90px heightwidth

Metnin ortada hem dikey hem de yatay olarak hizalanmasını istiyorum.

Denedim text-align:center, ancak yatay kısmı yapmıyor, bu yüzden denedim vertical-align:middle, ama işe yaramadı.

Herhangi bir fikir?

Bir metin ve / veya resim satırı ise, yapılması kolaydır. Sadece kullan:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Bu kadar. Birden fazla satır olabilirse, o zaman biraz daha karmaşıktır. Ancak http://pmob.co.uk/ adresinde çözümler var . "Dikey hizalama" yı arayın.

Kesmek veya karmaşık div'ler eklemek eğiliminde oldukları için ... Bunu yapmak için genellikle tek hücreli bir tablo kullanıyorum ... mümkün olduğunca basit hale getirmek için.

2020 için güncelleme:

Internet Explorer 10 gibi daha önceki tarayıcılarda çalışmasını gerektirmedikçe, flexbox'ı kullanabilirsiniz. O olduğu yaygın tüm güncel büyük tarayıcılar tarafından desteklenen . Temel olarak, kabın ana ve çapraz ekseni boyunca merkezleme ile birlikte esnek bir konteyner olarak belirtilmesi gerekir:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Çocuk için "esnek öğe" olarak adlandırılan sabit bir genişlik belirtmek için:

#content {
  flex: 0 0 120px;
}

Örnek: http://jsfiddle.net/2woqsef1/1/

İçeriği daraltmak için, daha da basittir: flex: ...satırı esnek öğeden çıkarın ve otomatik olarak daraltılır.

Örnek: http://jsfiddle.net/2woqsef1/2/

Yukarıdaki örnekler, MS Edge ve Internet Explorer 11 dahil olmak üzere büyük tarayıcılarda test edilmiştir.

Özelleştirmeniz gereken bir teknik not: esnek öğenin içinde, bu esnek öğe esnek bir kap olmadığından, CSS'nin eski esnek olmayan kutusu beklendiği gibi çalışır. Ancak, mevcut esnek kaba ek bir esnek öğe eklerseniz, iki esnek öğe yatay olarak yerleştirilir. Dikey olarak yerleştirmek flex-direction: column;için esnek konteynere ekleyin . Esnek bir kap ve onun yakın alt öğeleri arasında böyle çalışır .

Merkezlemeyi yapmanın alternatif bir yöntemi vardır: centeresnek kabın ana ve çapraz eksenindeki dağılımı belirtmek yerine, bunun yerine margin: autodört yöndeki tüm fazladan yer kaplaması için esnek öğeyi ve eşit dağıtılmış kenar boşluklarını belirtmek esnek öğeyi her yöne ortalayacak. Bu, birden fazla esnek öğenin olması dışında çalışır. Ayrıca, bu teknik MS Edge üzerinde çalışır, ancak Internet Explorer 11 üzerinde çalışmaz.

2016/2017 Güncellemesi:

Daha yaygın olarak yapılabilir transformve Internet Explorer 10 ve Internet Explorer 11 gibi eski tarayıcılarda bile iyi çalışır.

position: relative;
top: 50%;
transform: translateY(-50%);

Örnek: https://jsfiddle.net/wb8u02kL/1/

Genişliği küçültmek için:

Yukarıdaki çözüm, içerik alanı için sabit bir genişlik kullanmıştır. Büzülme ile sarılmış bir genişlik kullanmak için

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

Örnek: https://jsfiddle.net/wb8u02kL/2/

Internet Explorer 10 desteği gerekiyorsa, flexbox çalışmaz ve yukarıdaki yöntem ve line-heightyöntem çalışır. Aksi takdirde, flexbox işi yapar.

2014'ten itibaren yaygın teknikler:

• Yaklaşım 1 - transform translateX/ translateY:

  Burada Örnek / Tam Ekran Örneği

  In desteklenen tarayıcılar (çoğu), kullanabilirsiniz top: 50%/ left: 50%birlikte translateX(-50%) translateY(-50%)yatay elemanı ortalamak / dinamik dikey için.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }

• Yaklaşım 2 - Flexbox yöntemi:

  Burada Örnek / Tam Ekran Örneği

  In desteklenen tarayıcılar , set displayhedeflenen için elemanın flexve kullanım align-items: centerdikey merkezleme ve justify-content: centeryatay merkezleme için. Ek tarayıcı desteği için satıcı önekleri eklemeyi unutmayın ( örneğe bakın ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }

• Yaklaşım 3 - table-cell/ vertical-align: middle:

  Burada Örnek / Tam Ekran Örneği

  Bazı durumlarda, html/ bodyöğesinin yüksekliğinin olarak ayarlandığından emin olmanız gerekir 100%.

  Dikey hizalama için, ebeveyn elemanın set width/ heightetmek 100%ve ekleyin display: table. Sonra çocuk elemanı için, değiştirmek displayiçin table-cellve ekleyin vertical-align: middle.

  Yatay merkezleme için, text-align: centermetni ve diğer alt inlineöğeleri ortalamak için ekleyebilirsiniz . Alternatif olarak, margin: 0 autoöğenin blockdüz olduğunu varsayarak kullanabilirsiniz .

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }

• Yaklaşım 4 - Kesinlikle 50%yer değiştirme ile üstten yerleştirilmiş :

  Burada Örnek / Tam Ekran Örneği

  Bu yaklaşım, metnin bilinen bir yüksekliğe sahip olduğunu varsayar - bu örnekte 18px. Sadece öğeyi kesinlikle 50%üst öğeye göre üstten konumlandırın . margin-topBu durumda, öğenin bilinen yüksekliğinin yarısı olan negatif bir değer kullanın -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }

• Yaklaşım 5 - line-heightYöntem (En az esnek - önerilmez):

  Buraya Örnek

  Bazı durumlarda, üst elemanın sabit bir yüksekliği olacaktır. Dikey merkezleme için, tek yapmanız gereken line-heightalt öğe üzerinde üst öğenin sabit yüksekliğine eşit bir değer ayarlamaktır .

  - bu çözüm bazı durumlarda çalışsa da, 's değerinde metnin birden fazla satır varken o işe yaramaz belirterek böyle .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

Yöntem 4 ve 5 en güvenilir yöntem değildir. İlk 3'ten biriyle git.

Flexbox / CSS kullanma:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Hızlı İpucu'ndan Alınan Öğeleri Dikey ve Yatay Ortalamanın En Kolay Yolu

display: table-cell;Bu div için CSS içeriğinize satır ekleyin .

Sadece tablo hücreleri desteklemektedir vertical-align: middle;, ancak div'a [tablo-hücre] tanımını verebilirsiniz ...

Canlı bir örnek burada: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

İçeriğini yatay ve dikey olarak ortalamak için bir kap için her zaman aşağıdaki CSS'yi kullanırım.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Burada iş başında görün: https://jsfiddle.net/yp1gusn7/

Bunun için çok kolay bir kod deneyebilirsiniz:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Kod bağlantısı: http://codepen.io/santoshkhalse/pen/xRmZwr

Bu CSS sınıfını hedeflenen <div> öğesine verin:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Üst öğedekiflex özelliği kullanabilir ve özelliği alt öğelere divekleyebilirsiniz margin:auto:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

flexBurada daha fazla seçenek görebilirsiniz : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Yaklaşım 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Yaklaşım 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Yaklaşım 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

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

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Bu benim için çalışıyor (test tamam!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

% 50'den başka değerler seçebilirsiniz. Örneğin,% 25 ebeveynin% 25'inde ortalanır.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Aşağıdaki yöntemleri deneyebilirsiniz:

1. Tek bir kelime veya bir satır cümleniz varsa, aşağıdaki kod hile yapabilir.

   Bir div etiketinin içine bir metin ekleyin ve ona bir kimlik verin. Bu kimlik için aşağıdaki özellikleri tanımlayın.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Not: line-height özelliğinin, bölmenin yüksekliği ile aynı olduğundan emin olun.

   görüntü

   Ancak, içerik birden fazla kelime veya satırdan oluşuyorsa, bu işe yaramaz. Ayrıca, bir bölümün boyutunu piksel veya% cinsinden belirtemeyeceğiniz zamanlar olacaktır (bölüm gerçekten küçük olduğunda ve içeriğin tam olarak ortada olmasını istediğinizde).

2. Bu sorunu çözmek için aşağıdaki özellik kombinasyonunu deneyebiliriz.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   görüntü

   Bu 3 kod satırı, içeriği tam olarak bir bölümün ortasında ayarlar (ekranın boyutundan bağımsız olarak). "Hizalama-öğeler: center" dikey merkezleme yardımcı olur iken "haklı-içerik: center" yatay merkezli yapacaktır.

   Not: Flex tüm tarayıcılarda çalışmaz. Ek tarayıcı desteği için uygun satıcı önekleri eklediğinizden emin olun.

KAFES

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Dikey hizalamayı elde etmek için çizgi yüksekliğini ayarlama.

line-height: 90px;

Bu doğru cevap olmalı. En temiz ve en basit:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Stil uygula:

position: absolute;
top: 50%;
left: 0;
right: 0;

Metniniz, uzunluğuna bakılmaksızın ortalanır.

Bu benim için çalıştı:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Benim için bu en iyi çözümdü:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Benim için çalışan gerçekten basit bir kod! Yalnızca bir satır ve metniniz yatay olarak ortalanır.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Çıktı şöyle görünür:

Kolay çözümler arayan geliştiricilerin biraz zaman ayırması için lütfen bu yanıtı oylayın. Teşekkürler! :)

Aşağıdaki örneği deneyin. Her kategori için örnekler ekledim: yatay ve dikey

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>