CSS將整個相對主體水平居中，而沒有包裝或滾動條？
[英]CSS to center entire relative body horizontally, without wrapper or scrollbars?
問題描述
哪種CSS可以將任何網頁的整個相對放置的主體居中，沒有滾動條，並且在視口左右兩側均等地剪切溢出內容？
頁面渲染時，如果最寬的元素比視口更寬，那么我希望內容的左側和右側“掉落”屏幕的兩側。 左側和右側的溢出都應被修剪/隱藏。
內容的寬度是不可預測的，並且通常可能比視口更寬。 我們應該始終看到中間的切片，沒有滾動條。
不重復的問題
請不要標記為“重復”。 這些問題沒有答案達到我想要的目標。 我已經測試了其中的每一個。
與上述問題中的常見答案不同，我沒有選擇將內容包裝在div中。 我只能使用html和body標簽。
所需的HTML：
這個問題不允許更改此html。 您的CSS答案應適用於任何網頁。 這些元素僅是示例-html中將有更多不可預測的元素。 您不能將內容包裝在容器div中。 您的CSS答案應顯示頁面的中心部分，在屏幕上不適合顯示的任何內容左右剪切。
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
必需的CSS
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position: relative;
}
您不能更改此CSS，只能添加新的CSS。 需要position:relative對於身體。
#wider元素只是廣泛內容的一個示例。 實際使用情況將包括更多寬度無法預測的元素。
輸出應呈現類似下圖的內容，並且沒有滾動條。 文本“向左溢出”應從屏幕的左側剪切掉。 “中心屏幕”一詞在水平方向上應該是死點。
非工作解決方案1：
下面的答案來自一個類似的問題，似乎沒有達到我的目標：
html,
body {
height: 100%;
}
html {
display: table;
width: 100%;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
}
非工作解決方案2：
類似問題的另一個答案似乎不適用於我的情況：
body {
width: 80%;
margin-left: auto;
margin-right: auto;
}
小提琴：
這個小提琴包含我的HTML以及上面的失敗答案。 隨時在這個小提琴中測試您的答案。
上面的HTML所需的輸出：
5 個解決方案
解決方案1
1 2019-07-22 08:32:05
如果我對您的理解正確，則可以執行以下操作：
body { overflow-x: hidden; } #wider { width: 10000px; border: 1px solid black; text-align: center; position: relative; left: 50%; transform: translate(-50%); }
Overflow to left <div id="wider">Center-screen </div>
解決方案2
1 2019-07-22 11:11:31
您只需在CSS代碼中添加文本對齊中心
HTML
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
CSS
#wider{
text-align:center;
}
解決方案3
1 已采納 2019-07-22 11:53:19
您只需要絕對定位+轉換：轉換樣式居中即可。
#wider { width: 10000px; border: 1px solid black; text-align: center; } body { position:absolute; left:50%; transform: translate(-50%); margin:0; overflow-x:hidden; }
<html> <body> Overflow to left <div id="wider">Center-screen</div> </body> </html>
解決方案4
0 2019-07-22 08:35:34
為了獲得水平居中的主體，您將需要在div內使用具有以下屬性的元素：“ flex-center flex-column”，
<h5 class="animated fadeIn mb-3">Hello Mate.</h5>
<p class="animated fadeIn text-muted">Mostafa Harb</p>
解決方案5
0 2019-07-22 09:36:29
這些屬性是您要實現的目標：
<html>
<style>
.entire-div{
text-align: center;
align-items:center;
align-content:center;
justify-items:center;
align-items:center;
}
</style>
<body>
<div class="entire-div">
<h1>Hello</h1>
</div>
</body>
</html>
CSS中div內水平和垂直居中的多個div相對div
[英]horizontally and vertically center mutliple relative divs inside a div in CSS
在不修改HTML的情況下將2列div水平居中（僅CSS）
[英]Horizontally center 2 columns divs without modifying HTML (only CSS)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.