408

Sekmelerimin içeriğini dikey olarak ortalamaya çalışıyorum, ancak CSS stilini eklediğimde display:inline-flexyatay metin hizalaması kayboluyor.

Sekmelerimin her biri için her iki x ve y metin hizalamasını nasıl yapabilirim?

* { 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;
}

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

Snippet'i genişlet

html css

— Shuji
kaynak

Genişlik ve yükseklik merkezi div olmadan ekran türü flex ve CSS 2D dönüşümü kullanan en son CSS yöntemleri Yalnızca CSS yöntemlerini kullanarak yatay ve dikey olarak freakyjolly.com/…

— Code Spy

666

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%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

Snippet'i genişlet

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: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

Snippet'i genişlet

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;
}

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

Snippet'i genişlet

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;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

Snippet'i genişlet

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;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

Snippet'i genişlet

— Josh Crozier
kaynak

3

Evet işe yarıyor. Zaten css3 üzerinde inline-flex eskiden vardı, bu yüzden bu yaklaşımın doğru bir şekilde nasıl alınacağını tamamen unuttum. Gerçekten minnettarım, çok teşekkür ederim.

— shuji

Yukarıdaki tüm "Tam ekran" örneğini açtım, dikey hizalamanın her zaman ekranın altına biraz fazla yaklaştığını fark ettim (1920x1080 çözünürlükte, etiket ekranda 20 piksel çok düşük). Web sayfamda 2. yaklaşımı uyguladım ve div tam ekran olmasa bile aynı sorunu yaşadım. Sorun web sayfamda daha da kötü. (100

— piksel

Flexbox kullanarak (IE9 +, [% 90 + tarayıcı pazarında kapsama alanı] (caniuse.com/#feat=flexbox)) çalışır: display: flexüst öğede align-self: centerve çocuklarda Yaklaşım 6'yı eklemek isteyebilirsiniz .

— Dan Dascalescu

Biraz Yaklaşım 2'yi değiştirdim: jsfiddle.net/yeaqrh48/278 . Sonuç olarak, pencerenin yüksekliğini azaltarak metin kapsamın ötesine geçer ve görülmesi imkansız hale gelir. Bu problem nasıl çözülür?

— ollazarev

1

@ josh-crozier css

— xd'de

31

CSS3 bir seçenekse (veya yedeğiniz varsa) dönüşümü kullanabilirsiniz:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

Yukarıdaki ilk yaklaşımdan farklı olarak, sola kullanmak istemezsiniz: IE9 + 'da bir taşma hatası olduğu için negatif çeviri ile% 50. Pozitif bir doğru değer kullandığınızda yatay kaydırma çubukları görmezsiniz.

— Bay Bullets
kaynak

Bunun transform: translateX(50%) translateY(50%);yerine dönüşümün olması gerektiğine inanıyorum . Yukarıdaki dönüşüm, Mozilla dönüşüm belgelerine göre sözdizimsel olarak doğru değildir .

— Eirik H

1

@EirikH Neye baktığınızdan emin değilsiniz, ancak bu sözdizimi gayet iyi (ve dokümanlarda bunu söylüyor). Çoğu transformdeğerler olabilir bir X ve Y değerini almak sadece bir almaya hem de uzmanlaşmış işlevleri almak için temel bir işleve sahiptir.

— Scott Marcus

9

Bir kutuyu hem dikey hem de yatay olarak ortalamanın en iyi yolu, iki kap kullanmaktır:

Dış konteyner:

sahip olmalı display: table;

İç konteyner:

sahip olmalı display: table-cell;
sahip olmalı vertical-align: middle;
sahip olmalı text-align: center;

İçerik kutusu:

sahip olmalı display: inline-block;
metnin ortalanmasını istemiyorsanız yatay metin hizalamasını ayarlamalıdır

Demo:

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Snippet'i genişlet

Ayrıca bkz bu Fiddle !

Sayfanın ortasında merkezleme:

İçeriğinizi sayfanızın ortasına ortalamak için dış kabınıza aşağıdakileri ekleyin:

position : absolute;
width: 100%;
height: 100%;

İşte bunun için bir demo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Snippet'i genişlet

Ayrıca bkz bu Fiddle !

— John Slegers
kaynak

7

2 div'de n eksenini ortalamak için 2 basit esnek özellik nasıl kullanılır :

Kabınızın yüksekliğini ayarlayın: Burada gövde en az 100vh olacak şekilde ayarlanmıştır.
align-items: center blokları dikey olarak ortalar
justify-content: space-around boş yatay alanı divlar etrafında dağıtacak

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div>foo</div>
<div>bar</div>

Snippet'i genişlet

— Creaforge
kaynak

5

Bu kod snippet'ini çalıştırın ve dikey ve yatay olarak hizalanmış bir div görün.

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

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

Snippet'i genişlet

— JFathi
kaynak

3

Benim için en basit ve en temiz çözüm CSS3 özelliği "transform" kullanmaktır:

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

<div class="container">
  <a href="#">Hello world!</a>
</div>

Snippet'i genişlet

— Tocqueville
kaynak

3

    .align {
        display: flex;
        width: 400px;
        height: 400px;
        border: solid 1px black;
        align-items: center;
        justify-content: space-around;
    }
    .align div:first-child {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute; 
    }
    .align div {
        width: 20px;
        height: 20px;
        background-color: blue;
    }

    <div class='align'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Snippet'i genişlet

İlk çocuk merkezde dikey ve yatay olarak hizalanacak

— Krishna
kaynak

2

Div'i bir sayfada ortalamak için check the fiddle link

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div id="vh">Div to be aligned vertically</div>

Snippet'i genişlet

Güncelle Başka bir seçenek de esnek kutu kullanmaktır check the fiddle link

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Snippet'i genişlet

— Nerdroid
kaynak

2

İstenen sonucu elde etmek için Flex-box yaklaşımı aşağıdadır

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

Snippet'i genişlet

— Manish62
kaynak

2

Başka bir yaklaşım tablo kullanmaktır:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>

Snippet'i genişlet

— Geliyorum
kaynak

2

Bir elemanı dikey ve yatay olarak ortalamak için aşağıda belirtilen özellikleri de kullanabiliriz.

Bu CSS özelliği öğeleri hizalar dikey olarak ve aşağıdaki değerleri kabul eder:

flex-start : Öğeler kabın üst kısmına hizalanır.

flex-end : Öğeler kabın altına hizalanır.

center : Öğeler kabın dikey merkezinde hizalanır.

taban çizgisi : Öğeler kabın taban çizgisinde görüntülenir.

streç : Öğeler konteynere uyacak şekilde gerilir.

Bu CSS özelliği , öğeleri yatay olarak hizalayan ve aşağıdaki değerleri kabul eden yaslama -içeriği :

esnek başlatma : Öğeler kabın sol tarafına hizalanır.

esnek uç : Öğeler kabın sağ tarafına hizalanır.

merkez : Öğeler kabın ortasında hizalanır.

arasındaki boşluk : Öğeler, aralarında eşit aralıklarla görüntülenir.

space-around : Öğeler, çevresinde eşit aralıklarla görüntülenir.

— Divyanshu Rawat
kaynak

2

Grid css yaklaşımı

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>

Snippet'i genişlet

— corashina
kaynak

2

Aşağıdaki Yeni ve kolay bir çözüm takip etmeniz gerekiyor :

  .centered-class {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100vw;
      height: 100vh;
    }

<div class="centered-class">
  I'm in center vertically and horizontally.
</div>

Snippet'i genişlet

— Sahil Ralkar
kaynak

1

Yaklaşım 6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}

<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

Snippet'i genişlet

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

— derp
kaynak

1

Sadece üst, alt, sol ve sağ 0 yapın.

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

— yoginder bagga
kaynak

1

Bunu CSS (öğeniz display:inline-grid+ grid-auto-flow: row;) Izgara ve Esnek Kutusu (üst öğe) kullanarak gerçekleştirebilirsiniz.display:flex; ) kullanarak,

Snippet'in altına bakın

#leftFrame {
  display: flex;
  height: 100vh;
  width: 100%;
}

#tabs {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

html,body {
  margin:0;
  padding:0;
}

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

Snippet'i genişlet

— Springer F
kaynak

1

Kaynak Bağlantı

Yöntem 1) Ekran tipi esnek

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

Yöntem 2) 2D Dönüşümü

.child-element {
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   position: absolute;
}

Buradaki diğer yöntemlere bakın

— Kod Casusu
kaynak

1

Bir div'i dikey ve yatay olarak ortalamanın en kolay yolu aşağıdaki gibidir:

<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
    <div style="display: table-cell; vertical-align: middle; text-align: center;">
        Text Here
    </div>
</div>

Snippet'i genişlet

Bir Örnek Daha :

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

— Bablu Ahmed
kaynak

1

Bu arama yaparken insanlar bu sayfaya gelebilir ilgili bir sorundur: Ben bir div (100px kare) "bekleyen .." animasyonlu gif için ortalamak istediğinizde:

  .centreDiv {
        position: absolute;
        top: calc(50vh - 50px);
        top: -moz-calc(50vh - 50px);
        top: -webkit-calc(50vh - 50px);
        left: calc(50vw - 50px);
        left: -moz-calc(50vw - 50px);
        left: -webkit-calc(50vw - 50px);
        z-index: 1000; /*whatever is required*/
    }

— davaus
kaynak

1

Eğer tercih ederseniz olmadan :
FlexBox / ızgara / tablo
veya olmadan :
vertical-align: Orta

Yapabilirsin:

HTML

<div class="box">
  <h2 class="box_label">square</h2>
</div>

CSS

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

.box_label {
  box-sizing: border-box;
  display: inline-block;
  transform: translateY(50%);
  text-align: center;
  border: 1px solid black;
}

— Eden Sharvit
kaynak

0

Bu işe yaramalı

.center-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

<div class="center-div">Center Div</div>

Snippet'i genişlet

— Shalmali Jain
kaynak

0

Basit! Konteyner üzerinde ekran flex kullanın ve metin üzerinde otomatik kenar boşluğu !!!!

#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex; 
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
        <div id="hood">
            <span> I Am Centered</span>
        </div>
    </body>
</html>

Demo: https://jsfiddle.net/ay95f08g/

Test edildi: MacOs Mojave'de Safari, Chrome, Firefox ve Opera. (son güncelleme 25 Şubat 2019)

— Diego Favero
kaynak

0

Aynı şeyi yapacak çok şey vardı. div'ı sayfanın ortasına yapmak için aşağıdaki yöntemi kullanabilirsiniz.

.center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="center-box">
  <h1>Text in center of page</h1>
</div>

Snippet'i genişlet

şerefe!

— Shoyeb Memon
kaynak

0

En basit `flexbox`yaklaşım:

Tek bir öğeyi dikey ve yatay olarak ortalamanın en kolay yolu , onu esnek bir öğe yapmak ve kenar boşluğunu şu şekilde ayarlamaktır auto:

Bir esnek öğeye otomatik kenar boşlukları uygularsanız, bu öğe esnek kapta fazladan yer kaplamak için belirtilen kenar boşluğunu otomatik olarak genişletir ...

.flex-container {
  height: 150px;
  display: flex;
}

.flex-item {
  margin: auto;
}

<div class="flex-container">
  <div class="flex-item">
    This should be centered!
  </div>
</div>

Snippet'i genişlet

Kenar boşluklarının her yönde bu şekilde genişletilmesi , elemanı tam olarak kabının ortasına itecektir .

— ajobi
kaynak

Bir öğeyi yatay ve dikey olarak merkezleme

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

Yaklaşım 2 - Flexbox yöntemi:

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

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

Yaklaşım 5 - `line-height`Yöntem (En az esnek - önerilmez):

Dış konteyner:

İç konteyner:

İçerik kutusu:

Demo:

Sayfanın ortasında merkezleme:

En basit `flexbox`yaklaşım:

Bir öğeyi yatay ve dikey olarak merkezleme

Yaklaşım 1 - transform translateX/ translateY:

Yaklaşım 2 - Flexbox yöntemi:

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

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

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

Dış konteyner:

İç konteyner:

İçerik kutusu:

Demo:

Sayfanın ortasında merkezleme:

En basit flexboxyaklaşım:

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

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

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

Yaklaşım 5 - `line-height`Yöntem (En az esnek - önerilmez):

En basit `flexbox`yaklaşım: