如何将元素置于浏览器窗口中间？

时间：2009-06-11 16:09:59

标签： html css

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

18 个答案:

答案 0 :(得分：37)

要做到这一点，您需要知道您居中的元素的大小。任何测量都可以（即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在浏览器窗口中居中。但无论如何，这可能还不错，因为你可能想要显示一个弹出/模态框？

答案 1 :(得分：14)

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

答案 2 :(得分：11)

我很惊讶没人说关于位置=固定。从7开始，它完全符合我的要求并适用于所有“人类”浏览器和IE。

答案 3 :(得分：11)

这是：

  • HTML + CSS only解决方案 - 无需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

您可以使用此代码执行任何操作。唯一的条件是任何衍生作品必须引用原作者。

答案 4 :(得分：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>

答案 5 :(得分：7)

如果您不知道浏览器的大小，可以使用以下代码简单地在CSS中心：

HTML code：

<div class="firstDiv">Some Text</div>

CSS代码：

 .firstDiv {
  width: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #F1F1F1;
 }

这也有助于未来任何无法预料的变化。

答案 6 :(得分：4)

我在定位和对齐方面遇到了很多问题，直到我发现Flexbox是指南中的建议。

A Complete Guide to 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>

有关详细信息，请参阅文章。

答案 7 :(得分：2)

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

div 
{
    margin: 0 auto;
}

答案 8 :(得分：2)

<div align="center">

或

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

答案 9 :(得分：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>

答案 10 :(得分：0)

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

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

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

答案 11 :(得分：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;
}

答案 12 :(得分：0)

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

答案 13 :(得分：0)

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

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

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

答案 14 :(得分：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>

答案 15 :(得分：0)

它对我有用：）。

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

答案 16 :(得分：0)

这适用于任何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。

答案 17 :(得分：-1)

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

相关问题
最新问题