如何將整個 html body 對齊到中心？
[英]How to align entire html body to the center?
問題描述
如何將整個 html body 與中心對齊？
11 個解決方案
解決方案1
128 2013-02-08 15:42:46
我只是偶然發現了這篇舊帖子，雖然我確信 user01 早就找到了他的答案，但我發現目前的答案並不完全有效。 在使用其他人提供的信息玩了一會兒之后，我找到了一個適用於 IE、Firefox 和 Chrome 的解決方案。 在 CSS 中：
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
這幾乎與 abernier 的答案相同，但我發現包括寬度會破壞居中，就像省略自動邊距一樣。 我希望任何偶然發現這個線程的人都會發現我的回答有幫助。
注意：省略html, body { height: 100%; } html, body { height: 100%; }僅水平居中。
解決方案2
49 2015-03-20 12:01:04
你可以試試：
body{ margin:0 auto; }
解決方案3
21 2011-06-24 07:31:32
編輯
從今天開始使用 flexbox，你可以
body {
display:flex; flex-direction:column; justify-content:center;
min-height:100vh;
}
以前的回答
html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}
解決方案4
11 2016-01-27 20:07:45
如果我有一件我喜歡分享的關於 CSS 的事情，那就是我最喜歡的將東西放在兩個軸上的方式！！！
這種方法的優點：
- 與人們實際使用的瀏覽器完全兼容
- 不需要桌子
- 高度可重用，用於將任何其他元素置於其父元素中
- 容納具有動態（變化）維度的父母和孩子！
我總是通過使用 2 個類來做到這一點：一個用於指定父元素，其內容將居中 ( .centered-wrapper )，第二個用於指定父元素的哪個子.centered-content居中 ( .centered-content )。 在父級有多個子級但只有 1 個需要居中的情況下，第二個類很有用）。 在這種情況下， body將是.centered-wrapper ，內部div將是.centered-content 。
<html>
<head>...</head>
<body class="centered-wrapper">
<div class="centered-content">...</div>
</body>
</html>
居中的想法現在是使.centered-content成為inline-block 。 這將很容易促進水平居中，通過text-align: center; ，並且還允許垂直居中，如您所見。
.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;
}
這為您提供了 2 個真正可重用的類，用於將任何孩子置於任何父母的中心！ 只需添加.centered-wrapper和.centered-content類。
那么， :before元素是怎么回事？ 它有助於vertical-align: middle; 並且是必要的，因為垂直對齊不是相對於父級的高度 -垂直對齊是相對於最高兄弟姐妹的高度！！！ . 因此，通過確保存在高度為父級高度的兄弟（100% 高度，0 寬度使其不可見），我們知道垂直對齊將相對於父級的高度。
最后一件事：您需要確保您的html和body標簽是窗口的大小，以便它們居中與瀏覽器居中相同！
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
解決方案5
8 2018-02-04 23:13:38
我在html上使用 flexbox 。 為了獲得不錯的效果，您可以匹配瀏覽器的 chrome，以便在大於頁面最大值的屏幕尺寸上對內容進行框架化。 我發現#eeeeee匹配得很好。 您可以添加一個框陰影以獲得漂亮的浮動效果。
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);
}
圖片/數據由StatCounter 提供
解決方案6
8 2011-06-24 07:20:24
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;
}
解決方案7
7 2019-11-27 21:03:10
寫就好了
<body>
<center>
*Your Code Here*
</center></body>
解決方案8
6 2020-07-07 11:57:42
嘗試這個
body {
max-width: max-content;
margin: auto;
}
解決方案9
4 2017-09-22 11:14:56
<style>
body{
max-width: 1180px;
width: 98%;
margin: 0px auto;
text-align: left;
}
</style>
只需在應用任何 CSS 之前應用此樣式。 您可以根據需要更改寬度。
解決方案10
0 2021-06-29 03:20:36
那這個呢：
- 如果width: 60% ，則margin-left: (1-60%)/2 = 20% ；
- 如果height: 50% ，則margin-top: (1-50%)/2=25% ；
margin-bottom 和 margin-right 也是如此；
<style type="text/css"> html { height: 100%; } body { width: 60%; height: 50%; margin: 25% 20% 25% 20%; border: 1px solid; } </style>
解決方案11
0 2021-11-20 16:55:30
<body class="center">
<div align="center">
</div>
</body>
這是使用 glitch.me 對我有用的代碼。
HTML Body作為中心對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.