如何在浏览器窗口中居中HTML元素？
我怎样才能放置一些HTML元素，说div，在浏览器窗口（不是页面，而不是屏幕）的中间？ 不依赖于浏览器窗口大小，屏幕分辨率，工具栏布局等，例如，我希望它在浏览器窗口的中间。
谢谢
要做到这一点，你需要知道你正在居中的元素的大小。 任何测量都可以（即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在浏览器窗口中居中。 但无论如何，这可能是足够好的，因为你可能想要显示一个popup/模式框？
这完全是可能的只是CSS – 不需要JavaScript： 这是一个例子
以下是该示例背后的源代码：
<!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>
我感到惊讶的是没有人说位置=固定。 这正是我自7年以来在所有“人类”浏览器和IE浏览器中所做的工作。
这是：
- 仅HTML + CSS解决scheme – 无需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
你可以用这个代码做任何你喜欢的事情。 唯一的条件是任何派生的工作必须有一个对原作者的引用。
div#wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
如果你不知道浏览器的大小，你可以简单地用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; }
这也有助于未来的任何不可预见的变化。
直到我findFlexbox作为指南中的build议之前，我在对中和alignment方面遇到了很多问题。
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>
有关更多详情，请参阅文章。
<div align="center">
要么
<div style="margin: 0 auto;">
要中心alignmentdiv，您应该应用样式
div { margin: 0 auto; }
这是检查和适用于所有浏览器。
<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>
这是绝对居中的一个很好的响应方法
浏览器兼容性： Chrome，Firefox，Safari，移动Safari，IE8-10。
优点：
- 跨浏览器（包括IE8-10）
- 没有特别的标记，最小的风格
- 响应百分比和最小/最大 –
- 使用一个类来中心任何内容
- 无论填充（无框大小！），居中
- 块可以很容易地resize
- 在图像上效果很好
注意事项：
- 高度必须声明（请参阅variables高度）
- 推荐设置溢出：自动防止内容溢出（请参阅溢出）
- 在Windows Phone上不起作用
我不认为你可以这样做。 您可以位于文档的中间，但是您不知道工具栏布局或浏览器控件的大小。 因此，您可以在文档中居中，但不在浏览器窗口中间。
如果我理解你是正确的，你想要垂直和水平中心的基础上的窗口，而不是文件。 这可能有点痛苦，但是你可以使用javascript来检测窗口大小，滚动位置，元素大小等，然后将元素放置在窗口的中心（不是文档，而是可视窗口）。
如果您希望在滚动时将此元素保留在窗口的模型中，则需要捕获滚动事件并调整位置。
这样做的代码因浏览器而异。
您可以编写一个JavaScript来查找窗口的高度和宽度，并将其设置为一半以find中心点。
添加你的东西里面的标签，并设置div的顶部和左边的JavaScript到你已经find使用Javascript的中心坐标。
让我知道如果你需要的代码。
希望这可以帮助。 诀窍是使用绝对定位，并configuration顶部和左侧的列。 当然，“死亡中心”将取决于你所embedded的对象/ div的大小，所以你需要做一些工作。 对于login窗口，我使用了以下内容 – 在您的示例中，它也具有一些可能实际使用的最大宽度和最大高度的安全性。 根据您的要求configuration下面的值。
div#wrapper { border: 0; width: 65%; text-align: left; position: absolute; top: 20%; left: 18%; height: 50%; min-width: 600px; max-width: 800px; }
你可以在任何对象的视口中心，这里是一个使用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函数，并调整窗口的大小。
这里是de jsfiddle http://jsfiddle.net/geomorillo/v82x6/
工作解决scheme
<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>
