Làm cách nào để căn chỉnh toàn bộ nội dung html cho trung tâm?

5

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

Nguồn

2011-06-24 07:20:24 jantimon

+0

mục đích của '0px' ở cuối, thay vì' tự động' là gì? – mmcrae

11

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

Nguồn

2011-06-24 07:31:32 abernier

+0

DOCTYPE nào cho phép thuộc tính 'style' của thực thể' html'? – ceving

+0

@ceving: không chắc chắn để hiểu ... có nghĩa là nó không phải là CSS hợp lệ? – abernier

82

Tôi chỉ cần stumbled trên bài cũ này, và trong khi tôi chắc chắn rằng user01 từ lâu đã tìm thấy câu trả lời của ông, tôi thấy câu trả lời hiện nay không hoàn toàn công việc. Sau khi chơi xung quanh 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 thấy giải pháp hoạt động trong 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 như giống với câu trả lời của abernier, nhưng tôi thấy rằng chiều rộng sẽ làm lệch tâm, như sẽ bỏ qua lề tự động. Tôi hy vọng bất cứ ai khác stumbles về chủ đề này sẽ tìm thấy câu trả lời của tôi hữu ích.

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

Nguồn

2013-02-08 15:42:46 MildWolfie

+0

Câu trả lời hay. Chỉ cần tự hỏi (như tôi không có nhiều kinh nghiệm với HTML), là thiết lập chiều cao đến 100% cần thiết? –

+6

@JackHumphries Chiều cao chỉ cần thiết nếu bạn muốn căn chỉnh trung tâm trang trên cả trục dọc và trục ngang. Nếu ngang là tất cả những gì bạn muốn, bạn có thể bỏ qua chiều cao. – MildWolfie

20

Bạn có thể thử:

body{ margin:0 auto; }

Nguồn

2015-03-20 12:01:04 arniotaki

7

Nếu tôi có một điều mà tôi thích chia sẻ liên quan đến CSS với, nó MY WAY Fave điều tập trung dọc theo hai trục !!!

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

Hoàn toàn tương thích 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 cần
cao thể tái sử dụng căn giữa đối tượng bất kỳ yếu tố khác bên cha mẹ của họ
thể chứa các bậc cha mẹ và trẻ em có kích thước động (thay đổi)!

tôi luôn luôn làm điều này bằng cách sử dụng 2 lớp: Một để xác định các yếu tố phụ huynh, mà nội dung sẽ được tập trung (.centered-wrapper), và một trong 2 để xác định các con của phụ huynh tập trung (.centered-content). Lớp thứ hai này hữu ích trong trường hợp cha mẹ có nhiều con, nhưng chỉ 1 cần phải được căn giữa). Trong trường hợp này, body sẽ là .centered-wrapper và một bên trong div sẽ 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à làm .centered-content an inline-block. Điều này sẽ dễ dàng tạo điều kiện định tâm nằm ngang, thông qua text-align: center; và cũng cho phép căn giữa theo chiều dọc như bạn 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 học có thể tái sử dụng để tập trung bất kỳ trẻ em nào vào bất kỳ phụ huynh nào! Chỉ cần thêm các lớp học .centered-wrapper và .centered-content.

Vì vậy, điều gì sẽ xảy ra với yếu tố :before?Nó tạo điều kiện cho 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 bố mẹ - căn chỉnh dọc liên quan đến 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 là chiều cao của cha mẹ (chiều cao 100%, 0 chiều rộng để làm cho nó ẩn), chúng ta biết rằng căn chỉnh theo chiều dọc sẽ liên quan đến chiều cao của cha mẹ.

Điều cuối cùng: Bạn cần đảm bảo rằng các thẻ html và body của bạn là kích thước của cửa sổ để căn giữa cho chúng giống như định tâm cho trình duyệt!

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

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

Nguồn

2016-01-27 20:07:45

1

<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. Bạn có thể thay đổi chiều rộng theo nhu cầu của bạn.

Nguồn

2017-09-22 11:14:56 CodeDreamerSLS

1

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

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

image/dữ liệu lịch StatCounter

Nguồn

2018-02-04 23:13:38

+0

Câu trả lời hay, hiện đại. Chỉ một vài bình luận. (a) Tiền tố của nhà cung cấp cho 'box-shadow' có thể dư thừa vì các trình duyệt hỗ trợ' flex' cũng hỗ trợ 'box-shadow'. (b) Có rất nhiều CSS làm nổi bật câu trả lời của bạn, nhưng làm cho các bit quan trọng khó phân biệt. Cảm ơn – Manngo

Làm cách nào để căn chỉnh toàn bộ nội dung html cho trung tâm?

Trả lời

Các vấn đề liên quan