Tüm html gövdesini merkeze nasıl hizalayabilirim?

Question 1

Tüm html gövdesini merkeze nasıl hizalarım?

Question 2

Bu eski gönderiye biraz önce rastladım ve user01'in cevabını çoktan bulduğundan eminim, ancak mevcut cevapların pek işe yaramadığını gördüm. Başkaları tarafından sağlanan bilgileri kullanarak biraz oynadıktan sonra, IE, Firefox ve Chrome'da çalışan bir çözüm buldum. CSS'de:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Bu, abernier'in cevabıyla neredeyse aynı, ancak otomatik marjı ihmal edeceği gibi, genişliğin dahil edilmesinin merkezlemeyi bozacağını buldum. Umarım bu konuya rastlayan başka biri cevabımı faydalı bulacaktır.

Not:html, body { height: 100%; } Yalnızca yatay olarak ortalamayı ihmal edin.

Question 3

Deneyebilirsin:

body{ margin:0 auto; }

Question 4

DÜZENLE

Bugünden itibaren flexbox ile şunları yapabilirsiniz:

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

ÖNCEKİ CEVAP

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

Question 5

CSS ile ilgili olarak paylaşmayı sevdiğim bir şey varsa, o da HER İKİ EKSEN BOYUNCA ŞEYLERİ MERKEZLEME YOLUMUMUZ !!!

Bu yöntemin avantajları :

İnsanların gerçekten kullandığı tarayıcılarla tam uyumluluk
Tablo gerekmez
Ebeveynlerinin içindeki diğer öğeleri ortalamak için son derece yeniden kullanılabilir
Ebeveynleri ve çocukları dinamik (değişen) boyutlarla ağırlıyor!

Bunu her zaman 2 sınıf kullanarak yapıyorum: Biri içeriği ortalanacak olan ana öğeyi belirtmek için ( .centered-wrapper) ve ikincisi, ana öğenin hangi alt öğesinin ortalandığını belirtmek için ( .centered-content). Bu 2. sınıf, ebeveynin birden fazla çocuğu olduğu, ancak yalnızca 1 tanesinin ortalanması gereken durumlarda kullanışlıdır. Bu durumda, bodyolacak .centered-wrapperve bir iç divolacaktır .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

Merkezleme fikri şimdi .centered-contentbir inline-block. Bu, yatay merkezlemeyi kolayca kolaylaştıracak text-align: center;ve aynı zamanda göreceğiniz gibi dikey merkezlemeye de izin verecektir .

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

Bu, herhangi bir çocuğu herhangi bir ebeveynin içinde ortalamak için size gerçekten yeniden kullanılabilir 2 sınıf verir! Sadece .centered-wrapperve .centered-contentsınıflarını ekleyin .

Öyleyse, bu :beforeunsurla ilgili ne var ? Kolaylaştırır vertical-align: middle;ve gereklidir çünkü dikey hizalama ebeveynin yüksekliğine bağlı değildir - dikey hizalama en uzun kardeşin boyuna bağlıdır !!! . Bu nedenle, yüksekliği ebeveynin boyu (% 100 yükseklik, görünmez hale getirmek için 0 genişlik) olan bir kardeşin olmasını sağlayarak, dikey hizalamanın ebeveynin boyuna göre olacağını biliyoruz.

Son bir şey: htmlve bodyetiketlerinizin pencerenin boyutunda olmasını sağlamanız gerekir, böylece onları ortalamak tarayıcıyı ortalamakla aynı olur!

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

Keman: https://jsfiddle.net/gershy/g121g72a/

Question 6

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Question 7

Flexbox kullanıyorum html. Güzel bir etki için, içeriğinizi sayfa maksimumlarınızdan daha büyük ekran boyutlarında çerçevelemek için tarayıcı kromunu eşleştirebilirsiniz. Bunun #eeeeeeeşleşmesini oldukça iyi buluyorum . Güzel bir yüzdürme efekti için bir kutu gölgesi ekleyebilirsiniz.

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

resim / veri izniyle StatCounter

Question 8

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Herhangi bir CSS uygulamadan önce bu stili uygulamanız yeterlidir. Genişliği ihtiyacınıza göre değiştirebilirsiniz.

Question 9

Sadece yaz

<body>
   <center>
            *Your Code Here*
   </center></body>

Question 10

Bunu dene

body {
max-width: max-content;
margin: auto;
}