如何在瀏覽器窗口中居中 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 元素？