Làm thế nào để căn chỉnh toàn bộ nội dung html vào giữa?

Question 1

Làm cách nào để căn chỉnh toàn bộ nội dung html vào chính giữa?

Question 2

Tôi chỉ tình cờ xem được bài đăng cũ này và trong khi tôi chắc rằng user01 đã tìm thấy câu trả lời của mình từ lâu, tôi thấy các câu trả lời hiện tại không hoàn toàn hiệu quả. Sau khi thử nghiệm một chút bằng cách sử dụng thông tin do những người khác cung cấp, tôi đã tìm ra giải pháp hoạt động trên IE, Firefox và Chrome. Trong CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Điều này gần giống với câu trả lời của abernier, nhưng tôi thấy rằng bao gồm cả chiều rộng sẽ phá vỡ căn giữa, cũng như bỏ qua lề tự động. Tôi hy vọng bất kỳ ai khác tình cờ gặp chủ đề này sẽ thấy câu trả lời của tôi hữu ích.

Lưu ý: Bỏ qua html, body { height: 100%; }chỉ giữa theo chiều ngang.

Question 3

Bạn co thể thử:

body{ margin:0 auto; }

Question 4

BIÊN TẬP

Kể từ hôm nay với flexbox, bạn có thể

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

CÂU TRẢ LỜI TRƯỚC

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

Question 5

Nếu tôi có một điều mà tôi muốn chia sẻ liên quan đến CSS, đó là CÁCH TRUNG TÂM SÓNG CỦA TÔI CŨNG CẢ HAI TRỤC !!!

Ưu điểm của phương pháp này :

Tương thích hoàn toàn với các trình duyệt mà mọi người thực sự sử dụng
Không cần bàn
Khả năng tái sử dụng cao để căn giữa bất kỳ phần tử nào khác bên trong phần tử gốc của chúng
Phù hợp với cha mẹ và trẻ em với kích thước động (thay đổi)!

Tôi luôn làm điều này bằng cách sử dụng 2 lớp: Một để chỉ định phần tử cha, có nội dung sẽ được căn giữa ( .centered-wrapper) và lớp thứ hai để chỉ định phần tử con nào được căn giữa ( .centered-content). Lớp thứ 2 này hữu ích trong trường hợp cha mẹ có nhiều con nhưng chỉ cần 1 con ở giữa). Trong trường hợp này, bodysẽ là .centered-wrapper, và một divsẽ là .centered-content.

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

Ý tưởng để căn giữa bây giờ sẽ là tạo ra .centered-contentmột inline-block. Điều này sẽ dễ dàng tạo thuận lợi cho việc căn giữa theo chiều ngang, xuyên suốt text-align: center;và cũng cho phép căn giữa theo chiều dọc như bạn sẽ thấy.

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

Điều này cung cấp cho bạn 2 lớp thực sự có thể tái sử dụng để căn giữa bất kỳ đứa trẻ nào bên trong của bất kỳ phụ huynh nào! Chỉ cần thêm .centered-wrappervà.centered-content các lớp.

Vậy, :beforeyếu tố đó có gì? Nó tạo điều kiện thuận lợi vertical-align: middle;và cần thiết vì căn chỉnh theo chiều dọc không liên quan đến chiều cao của cha mẹ - căn chỉnh theo chiều dọc tương đối với chiều cao của anh chị em cao nhất !!!. Do đó, bằng cách đảm bảo rằng có một anh chị em có chiều cao bằng chiều cao của cha mẹ (100% chiều cao, 0 chiều rộng để ẩn), chúng ta biết rằng căn chỉnh dọc sẽ tương ứng với chiều cao của cha mẹ.

Một điều cuối cùng: Bạn cần đảm bảo rằng các thẻ htmlvà của bạn bodycó kích thước bằng kích thước của cửa sổ để căn giữa chúng cũng giống như căn giữa vào trình duyệt!

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

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

Tôi sử dụng flexbox trên html. Để có hiệu ứng đẹp, bạn có thể so khớp các trình duyệt chrome để tạo khung nội dung của bạn trên kích thước màn hình lớn hơn kích thước tối đa của trang. Tôi thấy rằng nó #eeeeeephù hợp khá tốt. Bạn có thể thêm một bóng hộp để có hiệu ứng nổi đẹp mắt.

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

hình ảnh / dữ liệu được phép của StatCounter

Question 8

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

Chỉ cần áp dụng phong cách này trước khi áp dụng bất kỳ CSS nào. Bạn có thể thay đổi chiều rộng theo nhu cầu của bạn.

Question 9

Chỉ viết

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

Question 10

Thử đi

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