49
如何在瀏覽器窗口（不是頁面，不是屏幕）的中間放置一些html元素，比如說div？不取決於瀏覽器窗口大小，屏幕分辨率，工具欄佈局等。我希望它位於瀏覽器窗口的中間。如何在瀏覽器窗口中居中HTML元素？
謝謝
A
回答
10
我很驚訝，沒有人說位置=固定。它使正是我問，自7
0
我不認爲你可以做到這一點。您可以位於文檔的中間，但您不知道工具欄佈局或瀏覽器控件的大小。因此，您可以在文檔中居中，但不在瀏覽器窗口中間。
+0
這是不正確的。這個例子甚至適用於瀏覽器大小調整：http：//www.wpdfd.com/editorial/thebox/deadcentre3.html – Cuga 2009-06-11 16:26:02
+0
是的，但仍然相對於文檔（當瀏覽器窗口調整大小時調整大小）。但是，當你在Firefox和Chrome中打開這個功能時，你最大化它們。您將看到文本位於不同的位置Chrome瀏覽器的文檔更大，即使瀏覽器窗口大小相同。 – 2009-06-11 16:33:58
35
要做到這一點，你需要知道你正在居中的元素的大小。任何測量都會執行（即px，em，百分比），但它必須具有固定的大小。
的CSS將如下所示：
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
編輯：該中心在視口中。您只能使用JavaScript在瀏覽器窗口中居中。但無論如何，這可能足夠好，因爲你可能想要顯示一個彈出框/模式框？
+0
它以我的瀏覽器爲中心！這裏是html： <！DOCTYPE HTML>
\t Centered \t
–
Craigo
2011-10-06 23:19:27
1
0
如果我理解你正確，要居中垂直和水平的基礎窗口，而不是文件上的元素。這可能有點痛苦，但是您可以使用javascript來檢測窗口大小，滾動位置，元素大小等，然後將元素放置在窗口的中心（而不是文檔，但是可查看的窗口）。
如果您希望此元素在滾動時保留在窗口的模型中，則需要捕獲滾動事件並調整位置。
這樣做的代碼因瀏覽器而異。
+0
我試圖通過JavaScript解決這個問題，但無法獲得可視窗口座標。即使對於其中一種瀏覽器，我也不認爲可以計算它們。 – Kamarey 2009-06-11 16:29:23
2
爲中心對齊一個div應該應用樣式
div
{
margin: 0 auto;
}
11
這是完全可能的只是CSS--沒有需要的JavaScript： Here's an example
下面是一個例子背後的源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
+0
但它仍然是相對於文檔而言是死的。不是瀏覽器窗口。 – 2009-06-11 16:26:33
+1
它看起來在我的瀏覽器窗口的中間...無論你在IE或FF中做了什麼（調整大小等），它仍然是在中間輕拍... – Cuga 2009-06-11 16:34:07
+0
@Cuga，但沒有可滾動的內容。 – tundoopani 2011-12-20 21:58:03
0
您可以編寫一個JavaScript來查找窗口的高度和寬度，並將其設置爲一半以找到中心點。
添加你的東西里面的標籤，並設置div的頂部和左邊從JavaScript到你找到使用Javascript的中心座標。
讓我知道如果你需要的代碼。
1
這是檢查和適用於所有瀏覽器。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%; text-align: center;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: left;}
#inner {margin-left: auto; margin-right: auto;}
#inner {width: 300px; } /* this width should be the width of the box you want centered */
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
centered
</div>
</div>
</div>
</body>
</html>
+0
如果身體的高度不是100％，而是說爲3000px，則會看到文本位於文檔的中間位置，例如你應該向下滾動才能看到它。 – Kamarey 2009-06-11 16:40:31
0
希望這會有所幫助。訣竅是使用絕對定位並配置頂部和左側列。當然，「死亡中心」將取決於您所嵌入的對象/ div的大小，因此您需要做一些工作。對於登錄窗口，我使用了以下內容 - 在您的示例中，它也具有一些實際可能對您有用的最大寬度和最大高度的安全性。根據您的要求配置下面的值。
div#wrapper {
border: 0;
width: 65%;
text-align: left;
position: absolute;
top: 20%;
left: 18%;
height: 50%;
min-width: 600px;
max-width: 800px;
}
10
在這裏，所有的「人」的瀏覽器和IE瀏覽器的工作原理是：
- HTML + CSS唯一的解決辦法 - 沒有所需的JavaScript
- 它不要求你要知道內容的大小提前
- 中心窗口的內容看臺調整
和示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML centering</title>
<style type="text/css">
<!--
html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
#td_wrap { vertical-align: middle; text-align: center; }
-->
</style>
</head>
<body>
<table id="tbl_wrap"><tbody><tr><td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered -->
<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td></tr></tbody></table>
</body>
</html>
看看原來的URL全信息： http://krustev.net/html_center_content.html
你可以做任何你與此類似的代碼。唯一的條件是任何衍生作品都必須提及原作者。
3
我在定位和對齊方面遇到了很多問題，直到我在指南中找到Flexbox作爲建議。
我會後一片段（與Chrome的工作），在這裏爲了方便：
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
欲瞭解更多詳情，請參考文章。
1
這是一個偉大的響應方式Absolute Centering
瀏覽器兼容性：的Chrome，火狐，Safari，移動Safari瀏覽器，IE8-10。
優點：
- 跨瀏覽器（包括IE8-10）
- 沒有特殊標記，最小的樣式
- 響應與百分比和MIN-/MAX-
- 使用一個類來中心任何內容
- 居中無論填充（沒有箱子大小！）
- 塊可以很容易地調整
- 工程上的圖像偉大
注意事項：
- 身高必須聲明（見可變高度）
- 建議設置溢出：汽車，以防止內容溢出（請參閱溢出）
- 在Windows Phone上不起作用
0
你可以在中心視任何對象，這裏是使用jQuery
$(document).ready(function()
{
posicionar("#midiv");
$(window).on("resize", function() {
posicionar("#midiv");
});
function posicionar(elemento){
var altoDocumento = $(window).height();//alto
var anchoDocumento = $(window).width();
//console.log(altoDocumento);
//console.log(anchoDocumento);
var centroXDocumento = anchoDocumento/2;
var centroYDocumento = altoDocumento/2;
//console.log(centroXDocumemnto,centroYDocumento);
var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
var anchoElemento = $(elemento).outerWidth(true);//alto
var centroXElemento = anchoElemento/2;// centro x del elemento
var centroYElemento = altoElemento/2; // centro y del elemento
var posicionXElemento = centroXDocumento - centroXElemento;
var posicionYElemento = centroYDocumento - centroYElemento;
$(elemento).css("position","absolute");
$(elemento).css("top", posicionYElemento);
$(elemento).css("left", posicionXElemento);
}
});
的HTML
<div id="midiv"></div>
注意一個例子：你必須執行的功能onDomReady，當調整窗口大小。
這裏是德的jsfiddle http://jsfiddle.net/geomorillo/v82x6/
0
工作方案。
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
Center aligned text.(horizontal and vertical side)
</body>
</html>
4
如果你不知道瀏覽器的大小，你可以簡單地中心CSS用下面的代碼：
HTML代碼：
<div class="firstDiv">Some Text</div>
CSS代碼：
.firstDiv {
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F1F1F1;
}
這也有助於未來任何不可預見的變化。
9
div#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
相關問題
- 1. HTML CSS：如何水平居中瀏覽器模式窗口包含iframe？
- 2. 當元素在瀏覽器窗口中，按順序淡入
- 3. 如何在瀏覽器窗口的右側重新定位動態HTML元素？
- 4. 如何在視口中居中元素？
- 5. 如何在當前瀏覽器窗口（html）中顯示新窗口？
- 6. 如何在瀏覽器窗口中並排放置兩個div，居中
- 7. 使用KineticJS在谷歌瀏覽器中居中畫布元素
- 8. 如何使元素成爲瀏覽器窗口的高度？
- 9. 如何將元素放在瀏覽器窗口中間的頂層？
- 10. 如何使用HTML元素來調整自己的瀏覽器窗口？
- 11. HTML：如何設置子元素寬度=瀏覽器窗口寬度？
- 12. 跳轉到元素，窗口居中？
- 13. 如何在Safari瀏覽器中打開Safari瀏覽器中的新窗口
- 14. 居中html元素
- 15. 如何將JavaFX 2.0應用程序居中在瀏覽器窗口上
- 16. 如何在Firefox瀏覽器窗口
- 17. 居中一個大於瀏覽器窗口的div
- 18. 如何在窗口大小調整時保持元素居中
- 19. 如何在瀏覽器中呈現PDF元素上的HTML元素
- 20. 我可以從一個居中的包裝器中將元素拉伸到瀏覽器窗口的右側嗎？
- 21. 如何從Windows窗體瀏覽器控件中刪除元素
- 22. PDF不會在瀏覽器窗口中
- 23. 在javascript中檢測瀏覽器窗口
- 24. 隱藏元素，如果瀏覽器窗口寬度小於
- 25. 字符串html到瀏覽器窗口
- 26. 在Javascript中，如何檢測瀏覽器窗口在視圖中？
- 27. 在瀏覽器窗口外檢測svg元素
- 28. TD元素在縮小的瀏覽器窗口上換行
- 29. 在主瀏覽器窗口外彈出元素
- 30. 居中的背景居中窗口，而不是元素
你是什麼意思的窗口？在確切的中心，包括地址欄，標籤欄，狀態欄，菜單欄等？如果是這樣，那麼我認爲沒有像編寫一個可以在瀏覽器中查找像素大小的插件這樣的事情是不可能的。 – workmad3 2009-06-11 16:16:12