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

问题描述

如何在浏览器窗口的中间放置一些 html 元素 (称 div)(不是页面，而不是屏幕)？不依赖于浏览器窗口大小，屏幕分辨率，工具栏布局等。我想要它在浏览器窗口的中间。

谢谢

最佳解决方案

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

次佳解决方案

这是完全可以的只是 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>

第三种解决方案

这是：

仅 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

您可以使用此代码进行任何您喜欢的操作。唯一的条件是任何派生作品都必须引用原作者。

第四种方案

我很惊讶，没有人说关于 position = fixed 。它完全正是我从 7 年起所有”human” 浏览器和 IE 中所要求和工作的。

第五种方案

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

第六种方案

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

这也有助于将来的任何意外的变化。

第七种方案

我在定心和对齐方面遇到了很多问题，直到我发现 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>

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

参考文献

How to center html element in browser window?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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