Bagaimana cara menyelaraskan seluruh tubuh html ke tengah?

Question 1

Bagaimana cara menyelaraskan seluruh isi html ke tengah?

Question 2

Saya baru saja tersandung pada posting lama ini, dan sementara saya yakin user01 telah lama menemukan jawabannya, saya menemukan jawaban saat ini tidak cukup berfungsi. Setelah bermain-main sebentar menggunakan info yang diberikan oleh yang lain, saya menemukan solusi yang berfungsi di IE, Firefox, dan Chrome. Di CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Ini hampir identik dengan jawaban abernier, tetapi saya menemukan bahwa menyertakan lebar akan merusak pemusatan, seperti menghilangkan margin otomatis. Saya harap siapa pun yang tersandung di utas ini akan menemukan jawaban saya bermanfaat.

Catatan: Abaikan html, body { height: 100%; }untuk hanya menengahkan secara horizontal.

Question 3

Anda dapat mencoba:

body{ margin:0 auto; }

Question 4

EDIT

Mulai hari ini dengan flexbox, Anda bisa

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

JAWABAN SEBELUMNYA

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

Question 5

Jika saya memiliki satu hal yang ingin saya bagikan berkenaan dengan CSS, itu adalah CARA MEMUSATKAN HAL-HAL FAVORIT SAYA DI SELURUH Sumbu !!!

Keuntungan dari metode ini :

Kompatibilitas penuh dengan browser yang benar-benar digunakan orang
Tidak ada tabel yang dibutuhkan
Sangat dapat digunakan kembali untuk memusatkan elemen lain di dalam induknya
Menampung orang tua dan anak dengan dimensi dinamis (berubah)!

Saya selalu melakukan ini dengan menggunakan 2 kelas: Satu untuk menentukan elemen induk, yang isinya akan menjadi centered ( .centered-wrapper), dan yang kedua untuk menentukan anak mana dari induk yang berpusat ( .centered-content). Kelas ke-2 ini berguna dalam kasus di mana orang tua memiliki banyak anak, tetapi hanya 1 yang perlu dipusatkan). Dalam hal ini, bodyakan menjadi .centered-wrapper, dan divakan menjadi batin .centered-content.

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

Ide untuk centering sekarang akan membuat .centered-contentsebuah inline-block. Ini akan dengan mudah memfasilitasi pemusatan horizontal, melalui text-align: center;, dan juga memungkinkan pemusatan vertikal seperti yang akan Anda lihat.

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

Ini memberi Anda 2 kelas yang benar-benar dapat digunakan kembali untuk memusatkan anak mana pun di dalam orang tua mana pun! Cukup tambahkan kelas .centered-wrapperdan .centered-content.

Jadi, ada apa dengan :beforeelemen itu? Ini memfasilitasi vertical-align: middle;dan diperlukan karena perataan vertikal tidak relatif terhadap tinggi induk - perataan vertikal relatif terhadap ketinggian saudara tertinggi !!! . Oleh karena itu, dengan memastikan bahwa ada saudara kandung yang tingginya sama dengan tinggi induk (100% tinggi, 0 lebar agar tidak terlihat), kita tahu bahwa perataan vertikal akan berkaitan dengan tinggi induk.

Satu hal terakhir: Anda perlu memastikan bahwa tag htmldan bodyberukuran seukuran jendela sehingga memusatkannya sama dengan memusatkan ke browser!

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

Biola: 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

Saya menggunakan flexbox html. Untuk efek yang bagus, Anda dapat mencocokkan chrome browser untuk membingkai konten Anda pada ukuran layar yang lebih besar dari maksimum halaman Anda. Saya menemukan #eeeeeekecocokan yang cukup baik. Anda bisa menambahkan bayangan kotak untuk efek float yang bagus.

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

gambar / data milik StatCounter

Question 8

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

Cukup terapkan gaya ini sebelum menerapkan CSS apa pun. Anda dapat mengubah lebar sesuai kebutuhan Anda.

Question 9

Tulis saja

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

Question 10

Coba ini

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