中心位置：固定元素

時間 2020-02-13

標籤中心位置固定元素简体版

原文原文鏈接

我想提出一個position: fixed; 彈出框以屏幕爲中心，具備動態寬度和高度。我使用margin: 5% auto; 爲了這。沒有position: fixed; 它水平居中，但不垂直。添加position: fixed; ，它甚至不是水平居中的。 css

這是完整的集合： html

.jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; }

<div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div>

如何使用CSS將此框置於屏幕中心？ jquery

#1樓

添加一個容器，如：瀏覽器

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

而後把你的盒子放進這個div就能夠了。 ide

#2樓

惟一簡單的解決方案是使用table align = center，如： this

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

我沒法相信全世界的人們都在浪費這些豐富的時間去解決像居中這樣的基本問題。 css解決方案不適用於全部瀏覽器，jquery解決方案是一種軟件計算解決方案，而且因爲其餘緣由而不是一種選擇。 spa

我反覆浪費了太多時間以免使用桌子，但經驗告訴我要中止對抗它。使用表格來居中div。在全部瀏覽器中始終有效！不再用擔憂了。 code

#3樓

一個可能的答案： htm

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

#4樓

您基本上須要將top和left設置爲50%以使div的左上角居中。您還須要將margin-top和margin-left設置爲div的高度和寬度的負半部分，以將中心移向div的中間。 three

所以，提供了一個<!DOCTYPE html> （標準模式），這應該作到：

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

或者，若是您不關心垂直居中和舊瀏覽器（如IE6 / 7），那麼您也能夠將left: 0和right: 0到具備auto margin-left margin-right margin-left的元素，以便具備固定寬度的固定定位元件知道其左右偏移開始的位置。在你的狀況下：

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

一樣，若是您關心IE，這僅適用於IE8 +，而且這僅在水平而非垂直居中。

#5樓

或者只是將left: 0和right: 0到原始CSS，這使得它的行爲相似於常規的非固定元素，而且一般的自動邊距技術有效：

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

請注意，您須要使用有效的（X）HTML DOCTYPE才能在IE中正確運行（不管如何你固然應該......）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。