Kenar boşluğunu kullanma: bir div'i dikey olarak hizalamak için otomatik

Bu yüzden kullanırsak bir div'i yatay olarak ortalayabileceğimizi biliyorum margin:0 auto;. Should margin:auto auto;I işe gerektiğini düşünüyorum nasıl çalışır? Dikey olarak da ortalamak mı?

Neden de çalışmıyor vertical-align:middle;?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Ağustos 2020'yi güncelle

Yararlı bilgiler için aşağıdakileri okumaya değer olsa da, bir süredir Flexbox'a sahibiz, bu yüzden bu cevaba göre sadece onu kullanın .

Kullanamazsınız:

vertical-align:middleÇünkü bu kadar değil blok seviyesinden elemanlar için geçerli

margin-top:autove margin-bottom:autoçünkü onların çok kullanılan değerler olarak hesaplamak istiyorum sıfır

margin-top:-50%çünkü yüzde esaslı eşik değerler göre hesaplanır genişliği içeren bloğun

Aslında, belge akışının doğası ve öğe yüksekliği hesaplama algoritmaları , bir öğeyi üst öğesinin içinde dikey olarak ortalamak için kenar boşluklarının kullanılmasını imkansız hale getirir. Bir dikey kenar boşluğunun değeri her değiştirildiğinde, bir ana eleman yüksekliğinin yeniden hesaplanmasını (yeniden akış) tetikleyecektir, bu da orijinal elemanın yeniden ortalamasını tetikleyerek onu sonsuz bir döngü haline getirir.

Kullanabilirsiniz:

Senaryonuz için işe yarayan bunun gibi birkaç geçici çözüm ; üç öğenin şu şekilde iç içe geçmesi gerekir:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle , Browsershot'a göre iyi çalışıyor.

Bu soru 2012'de sorulduğundan ve flexbox'lar için tarayıcı desteğinde uzun bir yol kat ettiğimizden, bu cevabın zorunlu olduğunu hissettim.

Üst kapsayıcınız ekran ise flex, o zaman evet , margin: auto auto(olarak da bilinir margin: auto) bir ise ne olursa olsun, yatay ve dikey olarak bunu hem merkezi çalışacaktır inlineveya blockeleman.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Görüntü alanına göre boyutlandırma kullanan bu örnekte jfiddle'da olduğu gibi, genişlik / yüksekliğin kesinlikle belirtilmesi gerekmediğine dikkat edin.

Flexbox'lar için tarayıcı desteği, gönderme sırasında tüm zamanların en yüksek seviyesinde olmasına rağmen, birçok tarayıcı hala bunu desteklemiyor veya satıcı öneklerini gerektiriyor. Güncellenmiş tarayıcı destek bilgileri için http://caniuse.com/flexbox adresine bakın .

Güncelleme

Bu yanıt biraz dikkat çektiğinden, marginkullanıp kullanmadığınızı display: flexve kaptaki tüm öğeleri ortalamak isteyip istemediğinizi hiç belirtmenize gerek olmadığını da belirtmek isterim:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

İşte bulduğum en iyi çözüm: http://jsfiddle.net/yWnZ2/446/ Chrome, Firefox, Safari, IE8-11 ve Edge'de çalışıyor.

Eğer bir beyan varsa height( height: 1em, height: 50%vs.) ya da tarayıcı yüksekliğini bilen bir elemanın ( img, svgya da canvasörneğin), dikey merkezleme için gereken sonra tüm şudur:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Genellikle , içeriğin ekranın / kabın tüm uzunluğunu uzatmaması için bir widthveya daha fazla belirtmek istersiniz max-width.

Bunu, her zaman diğer içerikle örtüşen görünümde ortalanmasını istediğiniz bir modal için kullanıyorsanız, position: fixed;yerine her iki öğe için kullanın position: absolute. http://jsfiddle.net/yWnZ2/445/

İşte daha eksiksiz bir yazı: http://codepen.io/shshaw/pen/gEiDt

Düzenleme: 2020, onun yerine flex box kullanırdım.

Orijinal cevap:

Html

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

CSS

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

Sorunun 2012'den geldiğini biliyorum ama şimdiye kadarki en kolay yolu buldum ve paylaşmak istedim.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

ve CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Ortalamak istediğiniz div'in yüksekliğini biliyorsanız, onu kesinlikle üst öğesi içinde konumlandırabilir ve ardından topdeğeri olarak ayarlayabilirsiniz 50%. Bu, alt öğenin tepesini, ebeveyninin% 50'sine kadar düşürür, yani çok düşük. margin-topYüksekliğinin yarısına ayarlayarak geri çekin . Şimdi, ebeveynin dikey orta noktasında oturan child div'in dikey orta noktasına sahipsiniz - dikey olarak ortalanmış!

Misal:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Bu iki çözüm sadece iki iç içe eleman gerektirir.
İlk - İçerik statikse göreli ve mutlak konumlandırma (manuel merkez).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

veya akıcı tasarım için - tam içerik merkezi için bunun yerine aşağıdaki örneği kullanın:

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

https://jsfiddle.net/GlupiJas/w3jnjuv0/

İçeriğin pencere yüksekliğinin% 50'sini aşması durumunda 'minimum yükseklik' ayarına ihtiyacınız vardır. Bu yüksekliği mobil ve tablet cihazlar için medya sorgusuyla da değiştirebilirsiniz. Ancak yalnızca duyarlı tasarımla oynarsanız.

Sanırım daha ileri giderek basit JavaScript / JQuery komut dosyasını kullanarak minimum yüksekliği veya sabit yüksekliği herhangi bir nedenle bir ihtiyaç olması durumunda değiştirebilirsiniz.

İkincisi - içerik akıcıysa, dikey hizalama ve metin hizalı ortalanmış tablo ve tablo hücresi css özelliklerini de kullanabilirsiniz:

/*in a wrapper*/  
display:table;   

ve

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Mükemmel şekilde çalışır ve ölçeklenir, genellikle nesnenin genişliğini değiştiren ızgara düzenleri ve medya sorgusu ile duyarlı web tasarım çözümü olarak kullanılır.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

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

https://jsfiddle.net/GlupiJas/4daf2v36/

Tam içerik merkezleme için tablo çözümünü tercih ediyorum, ancak bazı durumlarda göreceli mutlak konumlandırma, özellikle içerik hizalamasının tam oranını korumak istemiyorsak daha iyi iş çıkaracaktır.

Div'i dikey olarak ortalamanın kolay bir yolu yoktur ve bu her durumda işe yarar.

Ancak duruma bağlı olarak bunu yapmanın birçok yolu vardır.

İşte bunlardan birkaçı:

• Üst öğenin üst ve alt dolgusunu ayarlayın, örneğin dolgu: 20px 0px 20px 0px
• Tabloyu kullanın, tablo hücresi içeriğini dikey olarak ortalar
• Üst öğenin konumunu göreceli olarak ve dikey olarak ortalamak istediğiniz div'leri mutlak olarak ayarlayın ve bunu üst olarak biçimlendirin: 50px; alt: 50 piksel; Örneğin

Ayrıca "css dikey merkezleme" için google da yapabilirsiniz

değişken yükseklik, üst ve alt kenar boşluğu otomatik

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

değişken yükseklik, üst ve alt kenar boşluğu otomatik

Flexbox'ı kullanma:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Sonucu göster

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>