Elemanların yatay ve dikey hizalanması. Ortaya hizalama: CSS düzeni

Bir nesneyi CSS ile dikey olarak ortalamanın temelde farklı birkaç yolu vardır, ancak doğru olanı seçmek zor olabilir. Bazılarına bakacağız ve ayrıca edinilen bilgileri kullanarak küçük bir web sitesi yapacağız.

CSS ile dikey merkez hizalaması elde etmek o kadar kolay değildir. Birçok yol vardır ve hepsi tüm tarayıcılarda çalışmaz. 5 farklı yönteme ve her birinin artılarına ve eksilerine bir göz atalım. Örnek.

1. yol

Bu yöntem, bazı öğeleri ayarladığımızı varsayar.

bir tablo olarak göstermenin bir yolu, bundan sonra içinde dikey hizalama özelliğini kullanabiliriz (farklı öğelerde farklı şekilde çalışır).

Ortalanması gereken bazı yararlı bilgiler.

#wrapper( ekran: tablo; ) #hücre( ekran: tablo-hücre; dikey hizalama: orta; )

profesyoneller

İçerik, yüksekliği dinamik olarak değiştirebilir (yükseklik, CSS'de tanımlanmamıştır).
Yeterli alan yoksa içerik kesilmez.

eksiler

IE 7 ve altında çalışmıyor
Çok sayıda iç içe etiket

2. yöntem

Bu yöntem, üst kısmı %50'ye ayarlanmış ve üst kenar boşluğu (kenar boşluğu) eksi içeriğin yüksekliğinin yarısı olan div'in mutlak konumlandırmasını kullanır. Bu, nesnenin CSS stillerinde tanımlanan sabit bir yüksekliğe sahip olması gerektiği anlamına gelir.

Yükseklik sabit olduğu için overflow:auto; içeriği içeren div için, yani içerik sığmazsa kaydırma çubukları görünecektir.

İçerik Burada

#content ( konum: mutlak; üst: %50; yükseklik: 240 piksel; üst kenar boşluğu: -120 piksel; /* eksi yüksekliğin yarısı */ )

profesyoneller

Tüm tarayıcılarda çalışır.
Ekstra yatırım yok.

eksiler

Yeterli alan olmadığında içerik kaybolur (örneğin, div gövdenin içindedir ve kullanıcı pencereleri küçültür, bu durumda kaydırma çubukları görünmez.

3. yöntem

Bu yöntemde içerik div'ini başka bir div ile saracağız. Yüksekliğini %50'ye (height: %50;) ve alt kenar boşluğunu yüksekliğinin yarısına (margin-bottom:-contentight;) ayarlayın. İçerik kayan noktayı temizleyecek ve ortalanacaktır.

işte içerik

#floater( float: left; yükseklik: %50; alt kenar boşluğu: -120px; ) #content( clear: her ikisi; yükseklik: 240px; konum: göreli; )

profesyoneller

Tüm tarayıcılarda çalışır.
Yeterli alan olmadığında (örneğin, pencere küçültüldüğünde) içerik kesilmez, kaydırma çubukları görünür.

eksiler

Sadece bir tane düşünüyorum: fazladan boş bir öğe kullanılıyor.

4. yöntem.

Bu yöntem, position:absolute özelliğini kullanır; sabit boyutlara (genişlik ve yükseklik) sahip div'ler için. Ardından koordinatlarını top:0; alt:0; , ancak sabit bir yüksekliğe sahip olduğu için esnemez ve merkezlenir. Bu, sabit genişlikli bir blok düzeyinde öğeyi (margin: 0 auto;) yatay olarak merkezlemenin iyi bilinen yöntemine çok benzer.

Önemli bilgi.

#içerik( konum: mutlak; üst: 0; alt: 0; sol: 0; sağ: 0; kenar boşluğu: otomatik; yükseklik: 240 piksel; genişlik: %70; )

profesyoneller

Çok basit.

eksiler

Internet Explorer'da çalışmıyor
Kapta yeterli alan yoksa içerik kaydırma çubukları olmadan kırpılır.

5. yöntem

Tek bir metin satırını ortalamak için bu yöntemi kullanabilirsiniz. Sadece metnin yüksekliğini (satır yüksekliği) öğenin yüksekliğine (yükseklik) ayarlayın. Bundan sonra, çizgi ortada görüntülenecektir.

Bazı metin satırı

#content( yükseklik: 100 piksel; satır yüksekliği: 100 piksel; )

profesyoneller

Tüm tarayıcılarda çalışır.
Sığmazsa metni kesmez.

eksiler

Yalnızca metinle çalışır (blok öğeleriyle çalışmaz).
Birden fazla metin satırı varsa, çok kötü görünüyor.

Bu yöntem, metni bir düğme veya metin kutusunda ortalamak gibi küçük öğeler için çok kullanışlıdır.

Artık dikey merkez hizalamasını nasıl yapacağınızı bildiğinize göre, sonunda şöyle görünecek basit bir web sitesi yapalım:

Aşama 1

Anlamsal işaretlemeyle başlamak her zaman iyidir. Sayfamız şu şekilde yapılandırılacaktır:

#floater (içeriği ortalamak için)
#merkezli (merkez öğe)
- #taraf
  - #logo
  - #nav (liste
  - #içerik
- #bottom (telif hakları ve tümü için)
Aşağıdaki html işaretlemesini yazalım:
Merkezli Bir Şirket
Bir şirket
- Ev
- Ürünler
- Blog
- temas etmek
- Hakkında
Sayfa başlığı

Süreç merkezli işbirliği ve fikir paylaşımının ardından katma değerli dış kaynak kullanımını bütünsel olarak yeniden yapılandırın. Etkinleştirilmiş zorunluluklar aracılığıyla etkili niş pazarları enerjik bir şekilde basitleştirin. Zorlayıcı senaryolardan sonra birinci sınıf yeniliğe bütünsel olarak hakim olun. Son teknoloji ürünü ürünlerle insan sermayesindeki yüksek standartları sorunsuz bir şekilde yeniden tanımlayın. Güçlü sanallardan önce standartlara uyumlu şemaları belirgin bir şekilde bir araya getirin. Kullanıma hazır bilgiler karşısında kaldıraçlı web hazırlığını benzersiz bir şekilde yeniden özetleyin.

Başlık 2

Müşteri tarafından yönlendirilen süreçler yerine özelleştirilmiş web hazırlığını verimli bir şekilde benimseyin. Proaktif teknolojiler karşısında platformlar arası zorunlulukları iddialı bir şekilde büyütün. Kurumsal çapta arabirimler olmadan çok disiplinli meta hizmetleri uygun şekilde güçlendirin. Odaklanmış e-pazarlarla rekabetçi stratejik tema alanlarını uygun şekilde düzene sokun. Katma değerli pazarlar karşısında birinci sınıf toplulukları fosforlu bir şekilde birleştirin. Sağlam e-hizmetlerden önce bütünsel hizmetleri uygun şekilde yeniden icat edin.
Telif hakkı bildirimi buraya gelecek

Adım 2

Şimdi sayfaya eleman yerleştirmek için en basit CSS'yi yazacağız. Bu kodu style.css dosyasına kaydetmelisiniz. Bağlantının html dosyasına yazıldığı üzerindedir.
Html, gövde ( kenar boşluğu: 0; dolgu: 0; yükseklik: %100; ) gövde ( arka plan: url("page_bg.jpg") %50 %50 tekrarsız #FC3; yazı tipi ailesi: Georgia, Times, serifler; ) #floater ( konum: göreli; kayan: sol; yükseklik: %50; kenar boşluğu: -200 piksel; genişlik: 1 piksel; ) #ortalanmış ( konum: göreli; açık: sol; yükseklik: 400 piksel; genişlik: %80; maks. -genişlik: 800 piksel; min-genişlik: 400 piksel; kenar boşluğu: 0 otomatik; arka plan: #fff; kenarlık: 4 piksel katı #666; ) #bottom ( konum: mutlak; alt: 0; sağ: 0; ) #nav ( konum: mutlak; sol: 0; üst: 0; alt: 0; sağ: %70; dolgu: 20 piksel; kenar boşluğu: 10 piksel; ) #content ( konum: mutlak; sol: %30; sağ: 0; üst: 0; alt: 0; taşma: otomatik; yükseklik: 340 piksel; dolgu: 20 piksel; kenar boşluğu: 10 piksel; )
İçeriğimizi merkeze hizalı hale getirmeden önce, gövde ve html yüksekliklerini %100 olarak ayarlamamız gerekiyor. Yükseklik, iç ve dış dolgu (doldurma ve kenar boşluğu) olmadan kabul edildiğinden, kaydırma çubukları olmaması için onları (doldurma) 0 olarak ayarladık.

"kayan" öğe için alt dolgu, içeriğin yüksekliğinin (400 piksel) eksi yarısıdır, yani -200 pikseldir;

Sayfanız şimdi şöyle görünmelidir:

#centered öğesinin genişliği %80'dir. Bu, sitemizi küçük ekranlarda daraltır ve büyük ekranlarda genişletir. çoğu site, sol üst köşedeki yeni geniş monitörlerde çirkin görünüyor. Min-width ve max-width özellikleri de sayfamızı çok geniş veya çok dar görünmeyecek şekilde sınırlar. Internet Explorer bu özellikleri desteklemiyor. Sabit bir genişliğe ayarlanması gerekir.

#centered öğesi, position:relative olarak ayarlandığından, içindeki öğelerin mutlak konumlandırmasını kullanabiliriz. Ardından overflow:auto; #content öğesi için, sığdırılacak içerik yoksa kaydırma çubukları görünür.

Aşama 3

Ve yapacağımız son şey, sayfanın biraz daha çekici görünmesi için biraz stil eklemek. Menü ile başlayalım.
#nav ul ( liste stili: yok; dolgu: 0; kenar boşluğu: 20px 0 0 0; metin girintisi: 0; ) #nav li ( dolgu: 0; kenar boşluğu: 3px; ) #nav li a ( ekran: blok; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( içerik: """; renk: #aaa; yazı tipi ağırlığı: kalın; ekran: satır içi; kayan nokta: sağ; kenar boşluğu: 0 2px 0 5px; ) #nav li a:hover, #nav li a:odak ( arka plan: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( marj: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
Menünün daha iyi görünmesini sağlamak için yaptığımız ilk şey, list-style:none özniteliğini ayarlayarak madde işaretlerini kaldırmak ve varsayılanlar tarayıcılar arasında büyük farklılıklar gösterdiğinden dolgu ve dolguyu ayarlamak oldu.

Daha sonra, bağlantıların blok düzeyinde öğeler olarak işlenmesi gerektiğini belirttiğimize dikkat edin. Şimdi, görüntülendiklerinde, bulundukları elemanın tüm genişliği boyunca gerilirler.

Menüler için kullandığımız bir başka ilginç şey de :before ve :after sözde sınıflarıdır. Bir öğeden önce ve sonra bir şeyler eklemenize izin verirler. Bu, her bağlantının sonuna ok gibi simgeler veya semboller eklemenin iyi bir yoludur. Bu hile Internet Explorer 7 ve altında çalışmaz.

Adım 4

Ve son olarak, daha fazla güzellik için tasarımımıza bazı tüller ekleyeceğiz.
#ortalanmış ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( yazı tipi ailesi: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo ( font-size: 2em; text-align: center; color: #999; ) #logo güçlü ( yazı tipi ağırlığı: normal; ) #logo aralığı ( ekran: blok; yazı tipi boyutu: 4em; satır yüksekliği: 0,7em; renk: #666; ) p, h2, h3 ( satır yüksekliği: 1,6em; ) bir ( renk: #f03; )
Bu stillerde #centered öğesi için yuvarlatılmış köşeler ayarladık. CSS3'te bu, border-radius özelliği tarafından ele alınacaktır. Bu, Mozilla Firefox ve Safari/Webkit için -moz ve -webkit ön eklerinin kullanılması dışında bazı tarayıcılar tarafından henüz uygulanmamaktadır.

Uyumluluk

Tahmin edebileceğiniz gibi, uyumluluk sorunlarının ana kaynağı Internet Explorer'dır:
- #floater öğesi bir genişliğe ayarlanmalıdır
- IE 6'daki menüler etrafında ekstra dolgu
235881 görüntüleme

Genel olarak, HTML öğelerini bir sayfada ortalamak zor bir iş değildir. Bazı durumlarda... web geliştiricileri en iyi çözümü bulmak için kafa yormak zorunda kalırlar.

Öğeleri yatay olarak ortalamak o kadar zor değil, dikey olarak zaten soruları gündeme getiriyor, ancak genel olarak bunları birleştirmek kafa karıştırıcı olabilir. Duyarlı tasarım çağında, belirli öğelerin tam boyutlarını nadiren biliyoruz. Öğeleri CSS ile ortalamanın 6 farklı yolunu saydım. Basit örneklerle başlayalım ve daha karmaşık örneklerle bitirelim. Aynı HTML koduyla çalışacaktır:

Metin hizalama ile yatay ortalama

Bazen en basit çözüm en iyisidir:

Div.center ( text-align: center; arka plan: hsl(0, 100%, %97); ) div.center img (genişlik: %33; yükseklik: otomatik; )

Burada dikey merkezleme yoktur: bunun için div'e margin-top ve margin-bottom özelliklerini eklemeniz gerekir.

Kenar boşluğu ile merkezleme: otomatik

Yatay merkezleme için başka bir çözüm:

Div.center ( arka plan: hsl(60, 100%, %97); ) div.center img ( ekran: blok; genişlik: %33; yükseklik: otomatik; kenar boşluğu: 0 otomatik; )

Bu yöntem için display: block özelliğini ayarlamanız gerektiğini unutmayın.

Tablo hücresi ile merkezleme

display: table-cell kullanarak, öğenin hem dikey hem de yatay olarak ortalanmasını sağlayabiliriz. Ancak burada görüntüyü başka bir div öğesine yerleştirmemiz gerekiyor.

Ortaya hizalı ( ekran: tablo; arka plan: hsl(120, %100, %97); genişlik: %100; ) .center-core ( ekran: tablo hücresi; metin hizalama: merkez; dikey hizalama: orta; ) .center-core img (genişlik: %33; yükseklik: otomatik; )

Her şeyin doğru çalışması için div'in genişliğe ayarlanması gerekir: %100. Öğeyi dikey olarak ortalamak için yüksekliği ayarlayarak standart yöntemleri kullanacağız. IE8+ dahil her yerde çalışır.

mutlak merkezleme

Çok ilginç bir çözüm. Dış kabın yüksekliğini ayarlamanız gerektiği gerçeğinden oluşur:

Mutlak hizalı ( konum: göreli; minimum yükseklik: 500 piksel; arka plan: hsl(200, %100, %97); ) .mutlak hizalı img ( genişlik: %50; minimum genişlik: 200 piksel; yükseklik: otomatik; taşma : otomatik; kenar boşluğu: otomatik; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; )

Çeviri ile ortalama

CSS dönüşümlerinin kullanıldığı yeni çözüm. Hem yatay hem de dikey merkezleme sağlar:

Merkez ( arka plan: hsl(180, %100, %97); konum: göreli; min-yükseklik: 500px; ) .center img ( konum: mutlak; üst: %50; sol: %50; dönüşüm: çevir(-50) %, -50%); genişlik: %30; yükseklik: otomatik; )

Birkaç dezavantaj var:
- CSS dönüştürme özelliği, tarayıcı ön ekleri gerektirir
- IE'nin eski sürümlerinde (8 ve altı) çalışmaz
- Dış kaba bir yükseklik verilmesi gerekir.
- Kapsayıcının içinde metin varsa, biraz bulanık olabilir.
Esnek ekran görünümü ile merkezleme

Muhtemelen en kolay seçenek.

Merkez ( arka plan: hsl(240, 100%, %97); ekran: esnek; içeriği haklı çıkar: merkez; hizalama öğeleri: merkez; ) .center img (genişlik: %30; yükseklik: otomatik; )

IE'nin tüm sürümlerinde çalışmaz (ek olarak display: table-cell kullanarak güvenli tarafta olmanıza rağmen). Tam CSS:

Merkez ( arka plan: hsl(240, 100%, %97); display: -webkit-box; /* Safari, iOS 6 ve öncesi; Android, eski WebKit */ display: -moz-box; /* Firefox (olabilir ve olabilir) başarısız) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit- kutusu -align: merkez; -moz-box-align: merkez; -ms-flex-align: merkez; -webkit-align-items: merkez; align-items: merkez; -webkit-box-pack: merkez; -moz - box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; )

calc ile merkezleme

Bazı durumlarda, bu yöntem flexbox kullanmaktan daha çok yönlüdür:

Merkez ( arka plan: hsl(300, %100, %97); minimum yükseklik: 600 piksel; konum: göreli; ) .center img ( genişlik: %40; yükseklik: otomatik; konum: mutlak; üst:hesap(%50 -) %20); sol: calc(%50 - %20); )

Çok basit, ihtiyacımız olan boyutları tüm sayfa düzenine göre hesaplayabiliriz. Hesaplamalar çok basit, %50 kapsayıcının merkez noktası ama bizim görevimiz görüntünün sol üst köşesini bu koordinatlara yerleştirmek. Ardından, görüntünün yüksekliğinin ve genişliğinin yarısını çıkarın. Formül:

Üst: calc(%50 - (%40 / 2)); sol: calc(%50 - (%40 / 2));

Uygulamada, elemanların boyutlarını biliyorsak bu yöntemin gayet iyi çalıştığını görebilirsiniz:

Center img (genişlik: 500 piksel; yükseklik: 500 piksel; konum: mutlak; üst:hesap(50% - (300px / 2)); sol: calc(%50 - (300px - 2)); )

Bu yöntem Firefox tarafından desteklenmektedir, sürüm 4'ten itibaren tarayıcı öneklerini kaydetmeniz gerekecektir. IE 8'de çalışmıyor. Tam kod:

Orta görüntü ( genişlik: %40; yükseklik: otomatik; konum: mutlak; üst: -webkit-calc(%50 - %20); sol: -webkit-calc(%50 - %20); üst: -moz-calc (%50 - %20); sol: -moz-calc(%50 - %20); üst: calc(%50 - %20); sol: calc(%50 - %20); )

Umarım bu yöntemler kendinize en uygun çözümü bulmanız için yeterlidir.
css,
HTML

Yerleşim çalışması yapan birçoğunuzun öğeleri dikey olarak hizalama ihtiyacıyla karşılaştığını ve bir öğeyi merkeze hizalarken ne gibi zorluklar ortaya çıktığını bildiğinizi düşünüyorum.

Evet, CSS'de dikey hizalama için birçok değere sahip özel bir dikey hizalama özelliği vardır. Ancak pratikte beklendiği gibi çalışmıyor. Bunu anlamaya çalışalım.

Aşağıdaki yaklaşımları karşılaştıralım. ile hizalama:

tablolar,
girinti,
satır yüksekliği ,
germe,
negatif kenar boşluğu,
dönüştürmek,
sözde eleman
esnek kutu.

Biri diğerinin içinde iç içe geçmiş iki div öğesi vardır. Onlara uygun sınıfları verelim - outer ve inner .

Başlamak için, dış ve iç bloğun boyutlarının ne zaman olduğunu düşünün. bilinen. İç öğeye display: inline-block ve dış öğeye text-align: center ve Vertical-align: mid ekleyelim.

Hizalamanın yalnızca satır içi veya satır içi blok görüntüleme moduna sahip öğeler için geçerli olduğunu unutmayın.

Blokların boyutlarını ve kenarlıklarını görmek için arka plan renklerini ayarlayalım.

Dış ( genişlik: 200 piksel; yükseklik: 200 piksel; metin hizalama: merkez; dikey hizalama: orta; arka plan rengi: #ffc; ) .inner ( ekran: satır içi blok; genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi : #fcc; )
Stilleri uyguladıktan sonra, iç bloğun yatay olarak hizalandığını ancak dikey olarak hizalanmadığını göreceğiz:
http://jsfiddle.net/c1bgffffq/

Neden oldu? Gerçek şu ki, dikey hizalama özelliği hizalamayı etkiler öğenin kendisi, içeriği değil(tablo hücrelerine uygulandığı durumlar hariç). Bu nedenle, bu özelliği dış öğeye uygulamak hiçbir şey yapmadı. Ayrıca, bu özelliği iç elemana uygulamak da hiçbir şey yapmaz, çünkü satır içi bloklar komşu bloklarla dikey olarak hizalanır ve bizim durumumuzda bir satır içi bloğumuz var.

Bu sorunu çözmek için birkaç teknik var. Aşağıda her birine daha yakından bakalım.

Tablo ile hizalama

Bu çözümün bariz dezavantajı, anlambilim açısından hizalama için tabloların kullanılmasının yanlış olmasıdır. İkinci dezavantaj, bir tablo oluşturmak için dış bloğun etrafına bir eleman daha eklemeniz gerekmesidir.

İlk eksi, tablo ve td etiketlerini div ile değiştirerek ve CSS'de tablo görüntüleme modunu ayarlayarak kısmen kaldırılabilir.

Dolgu ile hizalama

Dış ( yükseklik: 200 piksel; ) . iç ( yükseklik: 100 piksel; kenar boşluğu: 50 piksel 0; )
http://jsfiddle.net/c1bgffffq/6/

Çözümün dezavantajı, her iki bloğun yüksekliklerinin bilindiği sınırlı sayıda durumda uygulanabilmesidir.

Satır yüksekliği ile hizalama

Dış ( yükseklik: 200 piksel; satır yüksekliği: 200 piksel; ) . iç ( beyaz boşluk: şimdi rap; taşma: gizli; )
http://jsfiddle.net/c1bgffffq/12/

Bu teknik, iç blok için satır yüksekliği değerini geçersiz kılarsanız ve display: inline-block ve Vertical-align: middle kurallarını eklerseniz, çok satırlı metni hizalamak için de kullanılabilir.

Dış ( yükseklik: 200 piksel; satır yüksekliği: 200 piksel; ) .inner ( satır yüksekliği: normal; ekran: satır içi blok; dikey hizalama: orta; )
http://jsfiddle.net/c1bgfffq/15/

Bu yöntemin dezavantajı, dış bloğun yüksekliğinin bilinmesi gerekmesidir.

Uzatma Hizalaması

Bunun için ihtiyacınız var:

göreli konumlandırmayı dış bloğa ve mutlak konumlandırmayı iç bloğa ayarlayın;
üst: 0 ve alt: 0 kurallarını iç bloğa ekleyin, bunun sonucunda dış bloğun tüm yüksekliğine kadar uzayacaktır;
iç bloğun dikey dolgusu için değeri otomatik olarak ayarlayın.

Bu tekniğin özü, uzatılmış ve kesinlikle konumlandırılmış bir blok için bir yükseklik belirlemenin, değerleri auto olarak ayarlanmışsa, tarayıcının dikey dolguyu eşit oranlarda hesaplamasına neden olmasıdır.

Negatif kenar boşluğu ile hizalama

Dış bloğu göreceli konumlandırmaya ve iç bloğu mutlak konumlandırmaya ayarlamanız gerekir. Daha sonra, iç kutuyu dış kutunun üst kısmının yüksekliğinin yarısı kadar aşağı indirmeniz gerekir: %50 ve kendi yüksekliğinin yarısı kadar yukarı marj-üst: -H iç / 2.

Dış ( konum: göreli; ) .iç ( yükseklik: 100 piksel; konum: mutlak; üst: %50; kenar boşluğu: -50 piksel; )
http://jsfiddle.net/c1bgffffq/13/

Bu yöntemin dezavantajı, iç ünitenin yüksekliğinin bilinmesi gerekmesidir.

dönüşüm ile hizalama

Dış ( konum: göreli; ) .iç ( konum: mutlak; üst: %50; dönüşüm: öteleY(-%50); )
http://jsfiddle.net/c1bgffffq/9/

Önceki yöntemde değeri yüzde olarak ayarlamak neden imkansızdı? Margin özelliğinin yüzde değerleri parent elemana göreli olduğu için %50 değeri dış kutunun yüksekliğinin yarısına eşit olur ve iç kutuyu kendi yüksekliğinin yarısı kadar yükseltmemiz gerekir. Transform özelliği tam olarak bunun içindir.

Bu yöntemin dezavantajı, dahili blok mutlak konumlandırmaya sahipse uygulanamamasıdır.

Flexbox ile Hizalama

Dış bloğun display: flex olarak ayarlanması gerekir ve iç bloğun margin: auto olarak ayarlanması gerekir. Ve hepsi bu! Güzel. Değil mi?

Dış ( ekran: esnek; genişlik: 200 piksel; yükseklik: 200 piksel; ) . iç ( genişlik: 100 piksel; kenar boşluğu: otomatik; )
http://jsfiddle.net/c1bgffffq/14/

Bu yöntemin dezavantajı, Flexbox'ın yalnızca modern tarayıcılar tarafından desteklenmesidir.

Hangi yolu seçmeli?

Metnin dikey hizalanması için dikey dolgu veya satır yüksekliği özelliğini kullanmak daha iyidir.
Yüksekliği bilinen (simgeler gibi) kesinlikle konumlandırılmış öğeler için, negatif kenar boşluğu yaklaşımı idealdir.
Bloğun yüksekliğinin bilinmediği daha karmaşık durumlar için sözde öğe veya transform özelliği kullanılmalıdır.
IE'nin eski sürümlerini desteklemeniz gerekmeyecek kadar şanslıysanız, o zaman elbette Flexbox daha iyidir.

Çoğu zaman görev, bloğu sayfanın / ekranın ortasına hizalamaktır ve hatta bir java betiği olmadan, sabit boyutlar veya negatif girintiler ayarlamadan, böylece blok boyutunu aşarsa kaydırma çubukları ebeveyn üzerinde çalışır. Bir bloğun ekranın merkezine nasıl hizalanacağına dair internette oldukça fazla monoton örnek var. Kural olarak, çoğu aynı ilkelere dayanmaktadır.

Sorunu çözmenin ana yolları, artıları ve eksileri aşağıdadır. Örneklerin özünü anlamak için, belirtilen bağlantılardaki örneklerde Sonuç penceresinin yüksekliğini / genişliğini azaltmanızı öneririm.

Seçenek 1. Negatif dolgu.

engellemek

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; ) .block ( genişlik: 250 piksel; yükseklik: 250 piksel; konum: mutlak; üst: %50; sol : %50; kenar boşluğu: -125 piksel 0 0 -125 piksel; img ( maks-genişlik: %100; yükseklik: otomatik; ekran: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ) )

Seçenek 2: Otomatik girinti.

engellemek

ebeveyn

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; ) .block ( genişlik: 250 piksel; yükseklik: 250 piksel; konum: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0; kenar boşluğu: otomatik; img (maksimum genişlik: %100; yükseklik: otomatik; ekran: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ) )

Seçenek 3. Tablo.

ebeveyn

blok

Ebeveyn ( genişlik: %100; yükseklik: %100; ekran: tablo; konum: mutlak; üst: 0; sol: 0; > .inner ( ekran: tablo hücresi; metin hizalama: orta; dikey hizalama: orta; ) ) .block ( ekran: satır içi blok; img ( ekran: blok; kenarlık: yok; ) )

Bu örneğe kaydırma eklemek için yapıya bir eleman daha eklemeniz gerekecek.
Örnek: jsfiddle.net/serdidg/fk5nqh52/3 .

Seçenek 4. Sahte öğe.

ebeveyn

sözde eleman

engellemek

sözde eleman

ebeveyn

engellemek

ebeveyn

engellemek

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; boşluk: şimdi rap; metin hizalama: merkez; yazı tipi boyutu: 0; &:before ( yükseklik: %100; ekran: satır içi blok; dikey hizalama: orta; içerik: ""; ) ) .block ( ekran: satır içi blok; boşluk: normal; dikey hizalama: orta; metin hizalama: sol ; img (ekran: blok; kenarlık: yok; ) )

Veya, ebeveynin sayfanın tamamını değil, yalnızca pencerenin yüksekliğini ve genişliğini kaplamasını istiyorsanız:

Üst ( konum: sabit; üst: 0; sağ: 0; alt: 0; sol: 0; taşma: otomatik; boşluk: şimdi rap; metin hizalama: merkez; yazı tipi boyutu: 0; &:before ( yükseklik: %100; ekran: satır içi blok; dikey hizalama: orta; içerik: ""; ) ) .blok ( ekran: satır içi blok; boşluk: normal; dikey hizalama: orta; metin hizalama: sol; img ( ekran: blok; kenarlık: yok; ) )

Seçenek 5. Flexbox.

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; ekran: esnek; hizalama öğeleri: merkez; içeriği hizala: merkez; içeriği haklı çıkar: merkez; taşma: otomatik; ) .block ( arka plan: #60a839; img ( ekran: blok; kenarlık: yok; ) )

Seçenek 6. Dönüştür.

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; taşma: otomatik; ) .block ( konum: mutlak; üst: %50; sol: %50; dönüşüm: çevir( -50%, -50%); img ( ekran: blok; ) )

Seçenek 7. Düğme.

engellemek

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; arka plan: yok; kenarlık: yok; anahat: yok; ) .block ( ekran: satır içi blok; img (ekran: blok;; kenarlık: yok; ) )

Bonus

engellemek

Ayrıca resmi ortaya hizalayabilirsiniz ve eğer resim daha büyükse ebeveyn, boyutuna göre ölçeklendirin ebeveyn.
Örnek: jsfiddle.net/serdidg/nfqg9rza/3 .
Büyük resim örneği:

Elemanların yatay ve dikey hizalanması. Ortaya hizalama: CSS düzeni

1. yol

profesyoneller

eksiler

2. yöntem

profesyoneller

eksiler

3. yöntem

profesyoneller

eksiler

4. yöntem.

profesyoneller

eksiler

5. yöntem

profesyoneller

eksiler

Aşama 1

Sayfa başlığı

Başlık 2

Adım 2

Aşama 3

Adım 4

Uyumluluk

Metin hizalama ile yatay ortalama

Kenar boşluğu ile merkezleme: otomatik

Tablo hücresi ile merkezleme

mutlak merkezleme

Çeviri ile ortalama

Esnek ekran görünümü ile merkezleme

calc ile merkezleme

Tablo ile hizalama

Dolgu ile hizalama

Satır yüksekliği ile hizalama

Uzatma Hizalaması

Negatif kenar boşluğu ile hizalama

dönüşüm ile hizalama

Flexbox ile Hizalama

Hangi yolu seçmeli?

Seçenek 1. Negatif dolgu.

Seçenek 2: Otomatik girinti.

Seçenek 3. Tablo.

Seçenek 4. Sahte öğe.

Seçenek 5. Flexbox.

Seçenek 6. Dönüştür.

Seçenek 7. Düğme.

Bonus