如何在浏览器窗口中间居中元素？

如何在浏览器窗口(不是页面，不是屏幕)中间放置一些 HTML 元素(例如，<div>) ？不依赖于浏览器窗口大小、屏幕分辨率、工具栏布局等。我希望它在 浏览器窗口的中间。

169804 次浏览
小开

我觉得你做不到。您可以在文档的中间，但是您不知道工具栏布局或浏览器控件的大小。因此，您可以在文档中居中，但不能在浏览器窗口的中间。

小开

要做到这一点，您需要知道您居中的元素的大小。任何测量都可以(例如，px，em，cent) ，但是它必须有一个固定的大小。

该系统将看起来如下:

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

编辑 : 该中心位于 viewport 中。只能使用 JavaScript 在浏览器窗口中居中。但是无论如何，这可能已经足够好了，因为您可能想要显示一个弹出/模式框？

小开 
<div align="center">

或者

<div style="margin: 0 auto;">
小开

如果我没有理解错的话，您应该基于窗口而不是基于文档来使元素垂直和水平居中。这可能有点麻烦，但是你可以使用 javascript 来检测窗口大小、滚动位置、元素大小等等，然后将元素放置在窗口的中心(不是文档，而是可视窗口)。

如果您希望在滚动窗口的模块中保留此元素，则需要捕获滚动事件并调整位置。

这样做的代码在不同的浏览器中是不同的。

小开

要使 div 居中对齐，您应该应用样式

div
{
margin: 0 auto;
}
小开

这完全可以通过 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>
小开

你可以写一个 JavaScript wto 来查找窗口的高度和宽度，然后把它设置为一半来查找中心点。

在一个标记中添加内容，并将 div 顶部和左侧从 Javascript 设置为您使用 Javascript 找到的中心坐标。

需要密码的话告诉我。

小开

这将被检查并在所有浏览器中工作。

<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>
小开

希望这个能帮上忙。诀窍是使用绝对定位并配置顶部和左边的列。当然，“死点”取决于要嵌入的对象/div 的大小，因此需要做一些工作。对于一个登录窗口，我使用了以下内容-它也有一些最大宽度和最大高度的安全性，实际上可能对您的示例有用。根据您的需求配置以下值。

div#wrapper {
border: 0;
width: 65%;
text-align: left;
position: absolute;
top:  20%;
left: 18%;
height: 50%;
min-width: 600px;
max-width: 800px;
}
小开
最佳答案

我很惊讶没有人提到位置 = 固定。它完全符合我的要求，可以在所有的“人类”浏览器和 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>

看看原始的网址获得完整的信息: Http://krustev.net/html_center_content.html

你可以用这个代码做任何你想做的事情。唯一的条件是，任何派生的作品必须引用原作者。

小开

在找到 Flexbox 作为指南中的推荐之前，我在集中和对齐方面遇到了很多问题。

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>

详情请参阅文章。

小开

您可以在 viewport 中将任何对象居中，下面是一个使用 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);
}
});

超文本标记语言

<div id="midiv"></div>

注意: 必须在调整窗口大小时执行 onDomReady 函数。

这是 de jsfiddle Http://jsfiddle.net/geomorillo/v82x6/

小开

工作解决方案。

<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>
小开

如果你不知道浏览器的大小，你可以简单地用下面的代码在 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;
}

这也有助于在未来任何不可预见的变化。

小开 
div#wrapper {
position: absolute;
top:  50%;
left: 50%;
transform: translate(-50%,-50%);
}
小开

这对我很有效:)。

div.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
小开

这应该适用于任何 div或屏幕大小:

.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
 <html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>

查看更多关于 flex 给你的细节。这应该可以在大多数浏览器上工作，查看兼容性矩阵 给你。


提交答案