Tüm tarayıcılar için div dikey olarak nasıl ortalanır?

1367

divCSS ile dikey olarak ortalamak istiyorum . Tablo veya JavaScript istemiyorum, sadece saf CSS. Bazı çözümler buldum, ancak hepsinde Internet Explorer 6 desteği eksik.

<body>
    <div>Div to be aligned vertically</div>
</body>

divInternet Explorer 6 da dahil olmak üzere tüm önemli tarayıcılarda dikey olarak nasıl ortalayabilirim ?

css cross-browser alignment vertical-alignment centering

— Burak Erdem
kaynak

25

@MarcoDemaio İnsanlar tablesburada düzenler için sürekli kaşlarını çatmıyor mu?

— Chud37

14

@ Chud37: ne yapmanız gerektiğine bağlıdır, düzen için tablolar genellikle çok yönlü değildir ve kod yazmak için uzun değildir, css ile 2 sütun düzenini kolayca 3/4/5 sols düzeni olarak değiştirebilirsiniz. Ancak bu durumda mükemmel bir çapraz tarayıcı tablosu ile gerçekleştirilebilecek böyle basit bir görev için düzinelerce css ipucu ve püf noktası kullanarak, kapıyı kullanmak yerine evinize pencereden girmeye çalışmak gibi.

— Marco Demaio

İnsanların eski tarayıcı desteğiyle ilgilenmemesi durumunda: davidwalsh.name/css-vertical-center

— Karolis Šarapnickis

1

css-vertical-center.com tarayıcı uyumluluk bilgileri ile bazı çözümler var

— EscapeNetscape

2

İşte bunu yapmanın birçok yolu css-tricks.com/centering-css-complete-guide

— Michael

Yanıtlar:

1374

Aşağıda, sabit genişlikte, esnek yükseklik içerik kutusunu dikey ve yatay olarak ortalamak için yapabileceğim en iyi çok yönlü çözüm var . Firefox, Opera, Chrome ve Safari'nin son sürümleri için test edildi ve çalışıyor.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Snippet'i genişlet

Dinamik İçeriğe Sahip Çalışan Bir Örneği Görüntüleme

Esnekliği test etmek için bazı dinamik içerikler oluşturdum ve bununla ilgili herhangi bir sorun görüp görmediğini bilmek isterim. Ortalanmış bindirmeler için de iyi çalışmalıdır - ışık kutusu, pop-up vb.

— Billbad
kaynak

"Mutlak" bir dış DIV olmadan, sayfadaki herhangi bir içerik tüm bloğu aşağı itecektir. Bu, onu diğer sayfa içeriğinden daha bağımsız hale getirir.

— Billbad

9

.outer {position:absolute;width:100%;height:100%}gerekli değil, sadece göstermek için buradalar. İhtiyacımız olan tek şey display:table, eğer biri benim gibi kafam karışırsa.

— gfaceless

Kaydırma çubuklarından kaçınmak için bunun% 99'a ihtiyacı olduğunu fark ettim. Daha da önemlisi, bu sadece ilk iki div ile çalışır, diyelim ki .outerve middleve .innertarzını görmezden gelin . Ben noktasıdır bilmiyorum margin-left, margin-righto ?? yatay elemanı ortalamak olmadığından auto seti !!!

— user10089632

Çıkarma width: 100%;ve ekleme margin: 0 autoiçin .outerhem de değişken bir genişliğe izin verir.

— rococo

@ user10089632 Hayır, genişlik veya yükseklik değil, konum sorunu. top: 0; left 0;en azından Chrome'u varsayılan 1 olarak ayarlayan eksik

— Michał Woliński

280

Listede göremediğim bir tane daha:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

Çapraz tarayıcı (Internet Explorer 8 - Kesintisiz Internet Explorer 10 dahil!)
Yüzdeler ve min- / max-
Dolgudan bağımsız olarak ortalanmış (kutu boyutlandırma olmadan!)
heightbeyan edilmelidir (bkz. Değişken Yükseklik )
overflow: autoİçeriğin yayılmasını önlemek için önerilen ayar (bkz. Taşma)

_{Kaynak: CSS'de Mutlak Yatay ve Dikey Merkezleme}

— Yisela
kaynak

7

Bu benim için çalıştı, ancak bir nedenden dolayı

— kromda

1

Teşekkür ederim. Pks yüksekliği veya genişliğini hesaplamak zorunda olmadığım bir düzeltmeye ihtiyacım vardı ve bu mükemmel çalıştı.

— GFoley83

8

Harika bir çözüm, özellikle bir ebeveyn

— divine

1

Yükseklik sabit değilse, bu bir streç yapar: güzel bir çözüm

— Bart Burg

% 100 olmayan bir genişlik ve yüksekliğiniz varsa, kullanınmargin: auto;

— Charles L.

253

En basit yol aşağıdaki 3 satır CSS olacaktır:

1) konum: göreceli;

2) üst kısım:% 50;

3) dönüşüm: translateY (-50%);

Aşağıda bir ÖRNEK vardır :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Snippet'i genişlet

— DrupalFever
kaynak

4

not: dış div yüksekliği "min-height: 170px" ile ayarlanırsa doğru çalışmaz

— Bart Burg

3

Z-endeksine müdahale eder

— ripper234 12:16

4

ne zaman çalışmıyor heightdış ait divolduğunu 100%. Sonra sadece ile çalışır position: absolute;.

— Arch Linux Tux

1

Bu çözümü ilk önce başka bir yerde bulmuştum, ama özellikle bu -webkit-transformvaryanttan bahsetmek için bu özel cevaba ekstra kudos , bu yöntemi phantomjs'de çalıştırmam gerekiyordu ... mücadele saatlerini bitirdim, çok teşekkür ederim!

— drmrbrewer

2

Bu en iyi cevap. Bu inanılmaz derecede basit, mevcut işin en az miktarını karıştırıyor ve artık kimsenin bile kullanmadığı IE9'a kadar her şey üzerinde çalışıyor. Hadi bu adama biraz daha vesile olsun!

— Nick Steele

136

Aslında dikey merkezleme için iki div'e ihtiyacınız var. İçeriği içeren div bir genişlik ve yüksekliğe sahip olmalıdır.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Snippet'i genişlet

İşte sonuç

— Vadim Ovchinnikov
kaynak

4

bu eski bir hile ... üst% 50 ve üst kenar boşluğu negatif iç div için yüksekliğinin yarısı

— Manatax

34

div için sabit bir yüksekliğiniz olduğunu varsayar. div yüksekliği değiştiğinde çalışmaz.

— Andre Figueiredo

116

Şimdi flexbox çözümü modern tarayıcılar için çok kolay bir yol, bu yüzden bunu sizin için tavsiye ederim:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

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

Snippet'i genişlet

— Santosh Khalse
kaynak

1

Eğer varsa navbar, yüksekliği height: calc(100% - 55px)veya yüksekliği ne olursa olsun ayarlayabilirsiniz navbar.

— Adrian

Ayrıca vücuttan marjları / dolgu kaldırmak zorunda kaldı

— Ben

İle iyi çalışır float. Teşekkürler.

— Amir A. Shabani

Bunun "daha eski" mobil safari tarayıcılarda potansiyel olarak garip davranacağını lütfen unutmayın. Yükseklik yerine önerilen kullanım .container sınıfında esnek temeldir

— Nine Magics

78

Edit 2020: bunu sadece IE8 gibi eski tarayıcıları desteklemeniz gerekiyorsa kullanın (ki bunu yapmayı reddetmelisiniz 😉). Değilse, flexbox kullanın.

Bu bulduğum en basit yöntem ve her zaman kullanıyorum ( jsFiddle demosu burada )

Bu yazı için CSS Tricks'ten Chris Coyier'e teşekkür ederiz .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Snippet'i genişlet

Destek IE8 ile başlar.

— Armel Larcier
kaynak

Eski tarayıcılar için desteği reddeden, benim için çözüm flexbox değil, ızgara sistemiydi. Benim için biraz fazla rahatsız edici olduğunda, kaydırma çubuğunu göstermek için gerekli olan ve ortalanmış içerik kaydırma alanını diğer tüm yöntemlerle kaybediyordu. Kapta sadece kullanıyorum: {display: grid; hizalama öğeleri: merkez; } Umarım bu birine yardımcı olur.

— tomasofen

63

Bir çok araştırmadan sonra nihayet nihai çözümü buldum. Yüzen elemanlar için bile çalışır.Kaynağı Görüntüle

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

— ymakux
kaynak

4

Kap öğesinin örtülü veya açık bir yüksekliğe sahip olması gerektiğini hatırlamak koşuluyla bu gerçekten işe yarar; jsfiddle.net/14kt53un CSS için nispeten yeni olanlara küçük bir gotcha.

— Martyn Shutt

6

Tüm cevaplardan en basit olanı budur! Umarım başkaları da cevabınızı görür! Teşekkür ederim! Bu arada, 50%benim için çalıştı (değil -50%)

— Codesee

İnanılmazdı. Saatlerce arama yaptıktan sonra bu benim için çalıştı. TranslateY kullanmak zorunda kaldım (% 50) Neden olduğundan eminim, ama işe yaradı. Benim durumumda, ebeveyn AEM Forms Engine tarafından oluşturuldu ve yalnızca belirli alt öğeleri kontrol edebiliyorum.

— tarekahf

41

Flexbox çözümü

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Snippet'i genişlet

— Reggie Pinkham
kaynak

3

Not justify-content: centeröğeleri yatay olarak da ortalayacak

— Peter Berg

36

Div'i bir sayfada ortalamak için keman bağlantısını kontrol edin .

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

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

Snippet'i genişlet

Başka bir seçenek esnek kutu kullanmak , keman bağlantısını kontrol etmektir .

.vh {
    background-color: #ddd;
    height: 400px;
    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

Başka bir seçenek de CSS 3 dönüşümü kullanmaktır:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

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

Snippet'i genişlet

— Nerdroid
kaynak

3

@ArmelLarcier Bu yanlış. Bağıl birimler yüzde %, ems ve rems'dir. Mutlak veya sabit değerler piksel veya noktadır. Bahsettiğiniz, "yalnızca belirtilen bir yükseklikte çalışır" dır. Bununla birlikte, Moes tarafından açıklanan bu yöntem bir yükseklik gerektirmesine rağmen, göreceli birimlerle beyan ettiğinizde, DIV'nin içeriğine uyacak şekilde dikey olarak genişleyeceği ortalanmış DIV'de ne kadar içerik olursa olsun, yüzde en iyisidir. Bu yöntemin güzelliği budur. Diğer iyi şey, birisinin hala bu tarayıcıları desteklemesi gerektiğinde bu yöntemin IE8 / 9 / 10'da çalışmasıdır.

— Ricardo Zea

@ricardozea İnatçı oynamak istemiyorum ama ortalanmış div'in dikey olarak ortalanmış olarak kalması yanlış olur. Dene. Yüksekliğin "sabit" olması gerektiğini söylediğimde, bunun doğru kelime olmadığını biliyorum. Gerçekten ebeveynine görecelidir. Her neyse, Chris Coyer'in yönteminin daha mantıklı olduğunu düşünüyorum, cevabımı görün stackoverflow.com/a/21919578/1491212 IE8 ile uyumlu VE belirtilen boyutları olmayan bir eleman üzerinde çalışıyor.

— Armel Larcier

1

@ArmelLarcier Her şey yolunda. Yanlış değil kardeşim. Deneyin: codepen.io/shshaw/pen/gEiDt - Yeşil kutuya paragraflar ekleyin;]. Verilmiş, etkisi gerçekleştirmek için Modernizr kullanıyor, ama sonuçta yapılabilir. Cevabınızı ve CSS-Tricks.com gönderisini de gördüm, ancak bu yöntem beni mutlu etmiyor, ekstra işaretleme kullanıyor ve CSS çok ayrıntılı. Bence en iyi çözüm ya flexbox ya da transform: translate(-50%, -50%);tekniği kullanmak. IE8 için sadece üst / orta hizalı ve devam edeceğim.

— Ricardo Zea

1

@ricardozea Peki bağladığınız kodpen "display: table" yöntemi ve ekstra biçimlendirme kullanır, bu yüzden şaşırmadım. Her neyse, son cümlenizi + 1'leyin.

— Armel Larcier

23

En kolay çözüm aşağıdadır:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Snippet'i genişlet

— Varsha Dhadge
kaynak

2

Gerçekten de en kolay olanı :) Rağmen, stilleri vücut yerine bir dış div ayarlamak zorunda kaldı.

— baburao

21

Ne yazık ki - ama şaşırtıcı değil - çözüm, olmasını istediğinden daha karmaşıktır. Ayrıca maalesef, dikey olarak ortalamak istediğiniz divın etrafında ek div'ler kullanmanız gerekir.

Mozilla, Opera, Safari, vb. Standartlara uygun tarayıcılar için, dış div'i tablo olarak görüntülenecek şekilde ve iç div ise tablo hücresi olarak görüntülenecek şekilde ayarlamanız gerekir; bunlar daha sonra dikey olarak ortalanabilir. Internet Explorer için aşağıdakileri yapmanız gerekir konumlandırmak iç div kesinlikle dış div içinde ve daha sonra belirtmek üst olarak % 50 . Aşağıdaki sayfalar bu tekniği iyi açıklar ve bazı kod örnekleri de sağlar:

CSS'de Dikey Merkezleme
~~Bilinmeyen Yükseklikte CSS'de Dikey Merkezleme (Internet Explorer 7 uyumlu)~~ (artık canlı değil)
Bilinmeyen Yükseklikte CSS'de Dikey Merkezleme (Internet Explorer 7 uyumlu) (Arşivlenmiş makale Wayback Machine izniyle)

JavaScript kullanarak dikey merkezleme yapmak için bir teknik de vardır. İçeriğin JavaScript ve CSS ile dikey hizalanması içeriği gösterir.

— sids
kaynak

20

Birisi yalnızca Internet Explorer 10'u (ve daha yenisini) önemsiyorsa, şunu kullanın flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

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

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

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="parent">
    <div class="centered"></div>
</div>

Snippet'i genişlet

Flexbox desteği: http://caniuse.com/flexbox

— bravedick
kaynak

Android <4.4 desteklemiyor align-items: center;!

— André Fiedler

Aslında, hizalama öğelerini destekler: center; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d Bu tabloya daha yakından bakmak isteyebilirsiniz. Android <4.4 için "Yalnızca eski flexbox belirtimini destekler ve kaydırmayı desteklemez" yazıyor.

— Nathan Osman

15

Bir elemanı dikey olarak ortalamanın modern bir yolu, flexbox .

Yüksekliğe karar vermek için bir ebeveyne ve merkezlemek için bir çocuğa ihtiyacınız var.

Aşağıdaki örnek, div'i tarayıcınızın ortasına ortalar. Ne (bizim örneğimizde) önemlidir ayarlamaktır height: 100%için bodyve htmlardından min-height: 100%kapsayıcınıza.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

Snippet'i genişlet

— Marwelln
kaynak

14

Yalnızca dikey olarak merkezleme

Internet Explorer 6 ve 7'yi önemsemiyorsanız, iki kapsayıcı içeren bir teknik kullanabilirsiniz.

Dış konteyner:

sahip olmalı display: table;

İç konteyner:

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

İçerik kutusu:

sahip olmalı display: inline-block;

Genişlik veya yüksekliğini umursamadan içerik kutusuna istediğiniz içeriği ekleyebilirsiniz!

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

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

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Snippet'i genişlet

Ayrıca bkz bu Fiddle !

Yatay ve dikey merkezleme

Hem yatay hem de dikey olarak ortalamak istiyorsanız, aşağıdakilere de ihtiyacınız vardır.

İç konteyner:

sahip olmalı text-align: center;

İçerik kutusu:

örneğin yatay metin hizalamasını yeniden ayarlamalı text-align: left;veya text-align: right;metnin ortalanmasını istemiyorsanız

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    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">
         Malcolm in the Middle
     </div>
   </div>
</div>

Snippet'i genişlet

Ayrıca bkz bu Fiddle !

— John Slegers
kaynak

13

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Snippet'i genişlet

İlgili: Görüntüyü Ortala

— antelove
kaynak

10

Bu konuya geri dönmem gerektiğinde hep nereye gidiyorum .

Atlamayı yapmak istemeyenler için:

Ana kapsayıcıyı position:relativeveya olarak belirtinposition:absolute .
Alt konteynerde sabit bir yükseklik belirtin.
Ayarla position:absolutevetop:50% çocuk kabın üzerindeki üst ortasına üst aşağı hareket ettirmek için.
Kenar boşluğu üstünü ayarlayın: -yy; burada yy, öğeyi dengelemek için alt kabın yüksekliğinin yarısıdır.

Kodda bunun bir örneği:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

— Ninx
kaynak

9

CSS'nin flex özelliğini kullanma.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Snippet'i genişlet

veya ile kullanılarak display: flex;vemargin: auto;

Kod snippet'ini göster

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Snippet'i genişlet

metin merkezini göster

Kod snippet'ini göster

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Snippet'i genişlet

Yüzde (%) yükseklik ve genişlik kullanma.

Kod snippet'ini göster

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Snippet'i genişlet

— Deepu Reghunath
kaynak

8

Ben sadece bu CSS yazdım ve daha fazla bilgi için, lütfen devam edin: Dikey ile bu makale sadece 3 satır CSS ile bir şey hizalayın .

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

— Sanjib Debnath
kaynak

1

CSS dönüşümleri metin ve kenarlıklarda bozulmalara neden olabilir (matematik kesirli piksellerle sonuçlandığında).

— Nathan K

5

CSS Izgarası

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

Snippet'i genişlet

— Andy Hoffman
kaynak

5

Yeni gelenler için lütfen deneyin

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

— Usman I
kaynak

1

Lütfen bu CSS kodunun dikey olarak nasıl hizalandığını gösteren bir Yığın Parçacığı ekleyin a . div

— Heretic Monkey

bu da işe yarıyor <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

Hizalama öğelerinin ve içeriği haklı göstermenin bu harika açıklamasıyla karşılaştım. Okumalısınız: stackoverflow.com/questions/42613359/…

— Usman I

4

Billbad'ın yanıtı yalnızca div'ın sabit genişliği ile çalışır .inner. Bu çözüm text-align: center, .outerdiv öğesine öznitelik ekleyerek dinamik bir genişlik için çalışır .

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

Snippet'i genişlet

— Ruwen
kaynak

İlginç! Neredeyse özdeş bir teknik kullanıyorum! -> stackoverflow.com/questions/396145/…

— John Slegers

4

Üç kod satırı transform, modern tarayıcılarda ve Internet Explorer'da pratik olarak çalışır:

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

Bu cevabın önceki sürümünde bazı eksiklikler bulduğum için bu cevabı ekliyorum (ve Stack Overflow sadece yorum yapmama izin vermiyor).

'div' göreceli, geçerli div gövdede ve kapsayıcı div olmadığında stili bozar. Ancak 'sabit' işe yarıyor gibi görünüyor, ancak içeriği görünümün ortasına sabitliyor
Ayrıca bu stili bazı katman div'larını ortalamak için kullandım ve Mozilla'da bu dönüştürülmüş div içindeki tüm öğelerin alt sınırlarını kaybettiğini buldum. Muhtemelen bir oluşturma sorunu. Ancak bazılarına sadece minimum dolgu eklemek doğru bir şekilde sonuç verdi. Chrome ve Internet Explorer (şaşırtıcı bir şekilde) kutuları doldurmaya gerek kalmadan oluşturdu

— Mandark
kaynak

3

Aşağıdaki bağlantı, CSS'nizde yalnızca 3 satırla bunu yapmanın basit bir yolunu sunar:

Her şeyi yalnızca 3 satır CSS ile dikey olarak hizalayın .

Kredi : Sebastian Ekström .

Sorunun zaten bir cevabı olduğunu biliyorum, ancak basitliği için bağlantıda fayda gördüm.

— Hicaro
kaynak

3

Tarayıcı uyumluluğu için yanıt vermiyor, yeni Grid'den ve çok da yeni olmayan Flexbox özelliğinden de bahsetmiyoruz.

Kafes

Gönderen: Mozilla - Izgara Belgeleri - Div'i Dikey Olarak Hizala

Tarayıcı Desteği: Izgara Tarayıcı Desteği

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

flexbox'a

Tarayıcı Desteği: Flexbox Tarayıcı Desteği

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

— ctekk
kaynak

3

Bence flexbox kullanmadan tüm tarayıcılar için sağlam bir çözüm - "align-items: center;" ekran: tablo ve dikey hizalama: orta; birleşimidir.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
kaynak

2

Bunu ile yaptım (buna göre genişliği, yüksekliği, kenar boşluğunu ve kenar boşluğunu değiştirin):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

— Netuddki
kaynak

Bu sadece DIV genişliğini / yüksekliğini merkezileştirmeye çalışıyorsanız biliyorsanız iyidir.

— Sorunun

2

İçerikler flexbox kullanılarak kolayca ortalanabilir. Aşağıdaki kod, içeriğin ortalanması gereken kapsayıcı için CSS'yi gösterir:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

— Mahendra Liya
kaynak

2

Özellikle göreli (bilinmeyen) yüksekliğe sahip ebeveyn div'ler için , bilinmeyende merkezleme çözümdeki benim için harika çalışıyor. Makalede gerçekten güzel kod örnekleri var.

Chrome, Firefox, Opera ve Internet Explorer'da test edildi.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Snippet'i genişlet

— Ruwen
kaynak

2

Sadece yapın div: Sınıfı kendinize ekleyin :

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Ve bir açıklama için bu makaleyi okuyun . Not: Heightgereklidir.

— Anshul
kaynak

2

Son zamanlarda öğrendiğim bir hile var: Kullanmanız gerekiyor top 50%ve sonra birtranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Snippet'i genişlet

— Melchia
kaynak

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.

Licensed under cc by-sa 3.0 with attribution required.