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

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

css html

Kamarey · 技术社区 · 16 年前

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

17 回复 | 直到 6 年前

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

0xSamman 9 年前

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

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>

Kamarey 16 年前

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

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

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

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

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

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>

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

gonzohunter 16 年前

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

div 
{
    margin: 0 auto;
}

threadhack 16 年前

<div align="center">

或

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

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>

Pim Jager 16 年前

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

James Conigliaro 16 年前

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

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

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

Bhaskar 16 年前

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

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

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

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

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>

Kiry Meas 7 年前

它对我有用:)。

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

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