如何在浏览器窗口中间居中一个元素？答案

【问题标题】：How to center an element in the middle of the browser window?如何在浏览器窗口中间居中一个元素？
【发布时间】：2010-11-02 04:41:23
【问题描述】：

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

【问题讨论】：

窗口是什么意思？就像在确切的中心一样，包括地址栏、标签栏、状态栏、菜单栏等？如果是这样，那么我认为如果不编写一个可以在浏览器中查找像素大小的插件之类的事情是不可能的。

标签： html css

【解决方案1】：

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

【讨论】：

这不是真的。这个例子甚至适用于浏览器调整大小：wpdfd.com/editorial/thebox/deadcentre3.html
是的，但仍然与文档相关（随着浏览器窗口大小的调整而调整大小）。但是，当您在 Firefox 和 Chrome 中打开它时，您会将它们都最大化。您会看到文本位于不同的位置，因为 Chrome 的文档更大，即使浏览器窗口大小相同。

【解决方案2】：

为此，您需要知道要居中的元素的大小。任何测量都可以（即 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 在浏览器窗口中居中。但这可能已经足够好了，因为您可能想要显示一个弹出框/模态框？

【讨论】：

它以我的浏览器为中心！这是 html：中心页面
居中

【解决方案3】：

<div align="center">

或

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

【讨论】：

仅水平居中。

【解决方案4】：

如果我理解正确，您希望元素基于窗口而不是文档垂直和水平居中。这可能有点痛苦，但是您可以使用 javascript 来检测窗口大小、滚动位置、元素大小等，然后将元素定位在窗口的中心（不是文档，而是可视窗口）。

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

执行此操作的代码因浏览器而异。

【讨论】：

我试图通过 javascript 解决这个问题，但无法获得可查看的窗口坐标。我认为无法计算它们，即使对于其中一种浏览器也是如此。

【解决方案5】：

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

div 
{
    margin: 0 auto;
}

【讨论】：

【解决方案6】：

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

【讨论】：

但它仍然是相对于文档的死点。不在浏览器窗口中。
它在我看来是浏览器窗口的中间...无论您在 IE 或 FF 中做什么（调整大小等），它仍然在中间...
@Cuga 但没有可滚动的内容。

【解决方案7】：

您可以编写一个 JavaScript 来查找窗口的高度和宽度，并将其减半以找到中心点。

在标签内添加你的东西，并将 div 顶部和左侧从 javascript 设置为使用 Javascript 找到的中心坐标。

如果您需要代码，请告诉我。

【讨论】：

【解决方案8】：

这已检查并适用于所有浏览器。

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

【讨论】：

如果正文的高度不是 100%，而是说 3000px，您会看到文本位于文档的中间，例如你应该向下滚动才能看到它。

【解决方案9】：

希望这会有所帮助。诀窍是使用绝对定位并配置顶部和左侧列。当然，“死点”将取决于您嵌入的对象/div 的大小，因此您需要做一些工作。对于登录窗口，我使用了以下内容 - 它还具有 max-width 和 max-height 的一些安全性，在您的示例中可能实际上对您有用。根据您的要求配置以下值。

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

【讨论】：

【解决方案10】：

我很惊讶没有人提到 position=fixed。它完全符合我的要求，并且适用于自 7 以来的所有“人类”浏览器和 IE。

【讨论】：

【解决方案11】：

这里是：

仅 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

您可以使用此代码做任何您喜欢的事情。唯一的条件是任何衍生作品都必须引用原作者。

【讨论】：

【解决方案12】：

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

A Complete Guide to Flexbox

为方便起见，我将在此处发布一个 sn-p（适用于 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>

更多详情，请参阅文章。

【讨论】：

【解决方案13】：

您可以在视口中居中任何对象，这里是一个使用 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/

【讨论】：

【解决方案14】：

可行的解决方案。

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

【讨论】：

【解决方案15】：

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

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

【讨论】：

我在 IE 11、mozilla firefox 和 chrome 上试过。完全居中。

【解决方案16】：

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

【讨论】：

【解决方案17】：

它对我有用:)。

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

【讨论】：

【解决方案18】：

这应该适用于任何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 here 的更多详细信息。这应该适用于大多数浏览器，请参阅兼容性矩阵 here。

【讨论】：

解决了我的问题，将 bootstrap3 模态对话框与内部图像居中！良好且简单直接的方法。