Benim sekmeler içerik dikey olarak ortalamak için çalışıyordum ama ben ınline-flex ekleyin görüntülemek text-align yatay kaybolur.

Nasıl x ve benim sekmeleri y her iki metin doğrultma işlemi yapabilir miyim?

jsFiddle

CSS:

* { box-sizing:border-box; }
#leftFrame {
    background-color:green;
    position:absolute;
    left:0;
    right:60%;
    top:0;
    bottom:0;
}
#leftFrame #tabs {
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:25%;
}
#leftFrame #tabs div {
    border:2px solid black;
    position:static;
    float:left;
    width:50%;
    height:100%;
    text-align:center;
    display: inline-flex;
    align-items: center;
}

HTML

<div id=leftFrame>
    <div id=tabs>
        <div>first</div>
        <div>second</div>        
    </div>
</div>

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

  Example Here / Full Screen Example

  supported browsers (çoğu), translateX(-50%) translateY(-50%) dinamik yatay-dikey/center elemanı ile birlikte 12*/left: 50% *kullanabilirsiniz.

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

• 2 - Flexbox yöntem yaklaşımı:

  Example Here / Full Screen Example

  supported browsers bulunan 17 ** dikey align-items: center kullanmak için hedeflenen öğe display justify-content: center yatay ortalama için ortalama. Sadece ek tarayıcı desteği (see example) satıcı önekleri eklemek için unutma.

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

• 3 - 21*/vertical-align: middle*yaklaşım:

  Example Here / Full Screen Example

  Bazı durumlarda, */body *23 öğenin yükseklik 25 ** için ayarlanmış olduğundan emin olmak gerekir.

  Dikey hizalamasını ayarlamak için ana öğe 26*/height *28 ** display: table eklemek. Alt öğe için table-cell 30 *değişim* 32 *ekleyin.

  Yatay ortalamak için, merkezi metin ve inline çocuklar için diğer öğeleri text-align: center ekleyebilirsiniz. Alternatif olarak, margin: 0 auto eleman block seviye olduğunu varsayarsak kullanabilirsiniz.

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

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

  Example Here / Full Screen Example

  Bu yaklaşım, metni bilinen bir yükseklik - bu durumda, 39 ** olduğunu varsayar. Sadece kesinlikle öğe 50% üst, ana öğenin göreli konumu. Elemanın bilinen yüksekliğin yarısı, bu durumda margin-top negatif bir değer - -9px kullanın.

  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-height yöntem (Az esnek - önerilen):

  Example Here

  Bazı durumlarda, ana öğe sabit bir yüksekliğe sahip olacak. Dikey ortalama için, yapmanız gereken tüm alt öğesi üst öğe sabit yüksekliği eşit line-height değer olarak ayarlanır.

  Bu çözüm bazı durumlarda işe yarayacak olsa, - like this metin birden fazla satır olduğunda işe yaramaz olduğunu belirtmekte yarar var.

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