代码之家  ›  专栏  ›  技术社区  ›  Kamarey

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

  •  53
  • Kamarey  · 技术社区  · 16 年前

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

    17 回复  |  直到 6 年前
        1
  •  36
  •   PatrikAkerstrand    16 年前

    要做到这一点,你需要知道你正在对中的元素的大小。任何测量都可以(例如px、em、percent),但它必须有固定的大小。

    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在浏览器窗口中居中。但这可能已经足够好了,因为您可能想要显示一个弹出/模式框?

        2
  •  13
  •   0xSamman    9 年前
    div#wrapper {
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
        3
  •  11
  •   Cuga    16 年前

    这完全可以通过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>
    
        4
  •  11
  •   Kamarey    16 年前

    我很惊讶没有人提到位置=固定。它完全符合我的要求,从7岁起就在所有“人类”浏览器和IE中工作。

        5
  •  11
  •   Delian Krustev    13 年前

    这里是:

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

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

        6
  •  6
  •   Anand Mohanty    10 年前

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

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

        7
  •  4
  •   Ahmed Elsawalhy    11 年前

    在找到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>
    

    有关详细信息,请参阅本文。

        8
  •  2
  •   gonzohunter    16 年前

    要居中对齐一个分区,应应用样式

    div 
    {
        margin: 0 auto;
    }
    
        9
  •  1
  •   threadhack    16 年前
    <div align="center">
    

    <div style="margin: 0 auto;">
    
        10
  •  1
  •   Michal M    16 年前

    这是选中的,可在所有浏览器中使用。

    <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>
    
        11
  •  0
  •   Pim Jager    16 年前

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

        12
  •  0
  •   James Conigliaro    16 年前

    如果我理解您是正确的,那么您需要根据窗口而不是文档,将元素垂直和水平居中。这可能有点麻烦,但您可以使用javascript检测窗口大小、滚动位置、元素大小等,然后将元素定位在窗口的中心(不是文档,而是可视窗口)。

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

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

        13
  •  0
  •   Bhaskar    16 年前

    您可以编写一个javascript wto来查找窗口的高度和宽度,并使其减半以找到中心点。

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

    如果您需要密码,请告诉我。

        14
  •  0
  •   Ryan Oberoi    16 年前

    希望这有帮助。技巧是使用绝对定位并配置顶部和左侧列。当然,“死点”将取决于要嵌入的对象/DIV的大小,因此需要做一些工作。对于一个登录窗口,我使用了以下内容——它还具有一些最大宽度和最大高度的安全性,这在您的示例中可能对您有用。根据您的要求配置以下值。

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

    工作方案。

    <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>
    
        16
  •  0
  •   Kiry Meas    7 年前

    它对我有用:)。

    div.parent {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
        17
  •  -1
  •   John Saunders    11 年前

    您可以将视区中的任何对象居中,以下是使用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并在窗口调整大小时执行。

    这是德杰斯菲德尔 http://jsfiddle.net/geomorillo/v82x6/