居中位置：固定元素答案

【问题标题】：Center a position:fixed element居中位置：固定元素
【发布时间】：2011-01-01 15:12:53
【问题描述】：

我想制作一个以屏幕为中心的position: fixed; 弹出框，具有动态宽度和高度。我为此使用了margin: 5% auto;。如果没有position: fixed;，它会水平居中，但不是垂直居中。添加position: fixed;后，它甚至没有水平居中。

这是完整的集合：

.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 使这个框在屏幕中居中？

【问题讨论】：

标签： css css-position centering

【解决方案1】：

有这个问题，所以我得出结论，使用（不可见的）容器是最好的选择（基于答案@Romulus Urakagi Ts'ai）。使用 flexbox 实现：

.zoom-alert {
  position: fixed;
  justify-content: center;
  display: flex;
  bottom: 24px;
  right: 0;
  left: 0;
  z-index: 100000;
  width: 100%;

  &__alert {
    flex: 0 0 500px;
    padding: 24px;
    background-color: rgba(212, 193, 105, 0.9);
    border: 1px solid rgb(80, 87, 23);
    border-radius: 10px;
  }
}

（语法是SCSS但可以很容易地修改为纯CSS）

【讨论】：

【解决方案2】：

居中固定位置元素

当在居中元素中使用flexbox中的边距时，它不会限制居中元素的宽度小于视口宽度（到目前为止，一个非常好的解决方案）

position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

也用于垂直居中（当高度与宽度相同时）

position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

【讨论】：

【解决方案3】：

我用的很简单。例如，我有一个导航栏position : fixed，所以我对其进行了调整，以便像这样在边缘留出一个小空间。

nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}

这个想法是取宽度的剩余百分比“在这种情况下为 2%”并使用它的一半。

【讨论】：

【解决方案4】：

添加一个容器，如：

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

然后把你的盒子放到这个div里就行了。

编辑：如 cmets 中所述，内部内容需要设置为 display: inline-block 假设有两个 div，例如：

    <div class="outer">
        <div class="inner">
             content goes here
        </div>
    </div>

那么内部的CSS需要是：

    .outer {
        position: fixed;
        text-align: center;
        left: 0;
        right: 0;
    }
    .inner {
        display: inline-block;
    }

与具有left: 0; right:0; 和text-align: center 的外部 div 一起，这将使内部 div 居中对齐，而无需明确指定内部 div 的宽度。

【讨论】：

"text-align: center" 在将内部 div 居中时对我不起作用。
内部框需要为display: inline-block 才能正常工作。（其他一些显示值也可能有效，例如table。）
对上述 CSS 更好的方法是添加 margin:auto; 并将宽度更改为 width:50% 或 width:400px。那么内容可以是纯文本、块元素或内联元素。
此解决方案的另一个好处是不会模糊 MSIE 和 Chrome 中的文本内容，当使用“转换”时会出现这种情况。

【解决方案5】：

当您不知道要居中的事物的大小并且希望它在所有屏幕尺寸中居中时，这非常有用：

.modal {
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;           /* (100 - height) / 2 */
  left: 5%;          /* (100 - width) / 2 */
}

【讨论】：

【解决方案6】：

简单，试试这个

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;

【讨论】：

【解决方案7】：

这个最适合我：

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

【讨论】：

【解决方案8】：

要固定位置，请使用：

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

【讨论】：

请解释为什么您的解决方案适用于发布的问题。

【解决方案9】：

我只是使用这样的东西：

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

它使对话框水平和垂直居中，我可以使用不同的宽度和高度来适应不同的屏幕分辨率，使其响应媒体查询。

如果您仍需要为不支持 CSS 自定义属性或 calc() 的浏览器提供支持，则不提供支持（请查看 caniuse。）

【讨论】：

【解决方案10】：

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

里面可以是任何具有不同宽度、高度或没有的元素。全部居中。

【讨论】：

【解决方案11】：

我使用了vw（视口宽度）和vh（视口高度）。视口是您的整个屏幕。 100vw 是您的屏幕总宽度，100vh 是总高度。

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

【讨论】：

【解决方案12】：

您基本上可以将其包装到另一个div 并将其position 设置为fixed。

.bg {
  position: fixed;
  width: 100%;
}

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

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

【讨论】：

【解决方案13】：

只需添加：

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

【讨论】：

这不适用于position: fixed，这就是问题所在。如果我错了，请编辑您的答案以包含可运行的代码 sn-p。
它适用于position: fixed，只要将max-width 或width 设置为元素。

【解决方案14】：

尝试将其用于无法正确居中的水平元素。

width: calc (width: 100% - width 其他偏离中心的位置)

例如如果你的侧边导航栏是 200px：

width: calc(100% - 200px);

【讨论】：

【解决方案15】：

您基本上需要将top 和left 设置为50% 以使div 的左上角居中。您还需要将margin-top 和margin-left 设置为div 的高度和宽度的负一半，以将中心移向div 的中间。

因此，提供<!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 添加到具有 margin-left 和 margin-right 的元素中987654334@，以便具有固定宽度的固定定位元素知道它的左右偏移量从哪里开始。在你的情况下：

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+，并且仅水平居中而不是垂直居中。

【讨论】：

我在css-tricks.com/… 中发现了这个技巧。但是当我改变宽度和高度时，它并没有移动中心。是的，我应该在改变高度和宽度时改变margin-left和top。
仅供参考：这将正确定位中间的东西，但不幸的是你失去了滚动条 - 即使你滚动，任何被视口剪掉的内容都无法访问，因为固定位置是基于视口，而不是页面。到目前为止，我发现的唯一解决方案是使用 javascript。
Groxx 我认为您可以使用 overflow property 将滚动条放在弹出窗口中的 div 内。
另外，对于这个你需要知道元素的宽度。
啊。如果是这样的话，我的意思是浏览器大小当然是动态的，不知道为什么会这样。相反，我认为他的意思是弹出尺寸需要是动态的。对我来说就是这种情况，所以我使用 transform: translate(-50%, -50%);效果很好，除了在 IE8 上不行。

【解决方案16】：

我想制作一个以屏幕为中心的具有动态宽度和高度的弹出框。

这是一种以动态宽度水平居中元素的现代方法 - 它适用于所有现代浏览器； support can be seen here.

Updated Example

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

对于垂直和水平居中，您可以使用以下内容：

Updated Example

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

您可能还希望添加更多以供应商为前缀的属性（参见示例）。

【讨论】：

我正在使用这种方法将一个固定位置的图像水平居中，该图像的宽度大于窗口宽度，并且至少在当前的 Firefox、Chrome、IE 11 和 Edge 版本中运行良好。
在我的测试中，它运行良好（在前缀后面），Win10 Edge 14、Win7 IE9+、Win10 Chrome、OSX Chrome、iPad4 Chrome & Safari、Android 4.4+ Chrome。对我来说唯一失败的是没有发生翻译的 Android 4.0。
@ahnbizcad，这适用于 Chrome 61、Safari 11 和 FireFox 65 等桌面浏览器，但不适用于 Android 6 上的 Chrome 61，可接受的答案适用于所有浏览器。
这会使 Chrome 中的图像模糊。
不知何故，只有在我的 img 的所有浏览器中都能正常工作的方法。非常感谢！

【解决方案17】：

left: 0;
right: 0;

无法在 IE7 下运行。

改为

left:auto;
right:auto;

开始工作，但在其他浏览器中它停止工作！所以在IE7下面用这种方式

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

【讨论】：

您介意编辑您的答案以包含整个解决方案吗？
如果没有左右两侧的自动边距，这将无法工作。

【解决方案18】：

一个可能的answer：

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

【讨论】：

这似乎确实有效，尽管它要求您已经知道元素的宽度和高度。

【解决方案19】：

唯一万无一失的解决方案是使用表格 align=center 如下：

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

我无法相信世界各地的人们会浪费大量时间来解决像 div 居中这样的基本问题。 css 解决方案不适用于所有浏览器，jquery 解决方案是一种软件计算解决方案，出于其他原因不能选择。

为了避免使用桌子，我反复浪费了太多时间，但经验告诉我不要再打它了。使用表格使 div 居中。在所有浏览器中始终有效！再也不用担心了。

【讨论】：

这根本不能回答问题。没有非 CSS 等同于 position:fixed。

【解决方案20】：

此解决方案不需要您为弹出 div 定义宽度和高度。

http://jsfiddle.net/4Ly4B/33/

而不是计算弹出窗口的大小，减去顶部的一半，javascript 正在调整 popupContainer 的大小以填满整个屏幕...

（100% 高度，使用 display:table-cell 时不起作用；（需要垂直居中））...

无论如何它都有效:)

【讨论】：

【解决方案21】：

或者只是将 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 中正常运行（无论如何，您当然应该拥有它......！）

【讨论】：

在什么意义上？父元素是body元素，没有边框。如果您向主体添加边框属性（？！），那么肯定会受到影响，就像我想象的 50% 技术一样。我向你保证，它在给定参数下工作得很好，只是在我手边的每个浏览器中都经过验证，并且具有不依赖于元素宽度的额外好处。
我所做的只是将这两个属性和一个文档类型添加到 OP 的示例 HTML 中。然而，在进一步的测试中，IE7（或兼容模式下的 8）似乎是问题所在 - 如果还设置了 left，它似乎不尊重 right 属性的值！（msdn.microsoft.com/en-us/library/… 指出 left 和 right 在 IE7 中只有“部分”支持）。好的，如果 IE7 支持很重要，我承认这个解决方案并不好，但要记住未来的好技巧:)
这应该是公认的答案。我有两个固定位置，一个用于不透明蒙版，另一个用于模态。这是我可以将固定位置模态置于屏幕中心的唯一方法。真棒答案谁会想到？
我同意，这应该是公认的答案。它也适用于响应式设计，因为它不依赖于宽度。
我建议简化答案，因为某些 css 仅与 OP 相关。您所需要的只是位置：固定；左：0；右：0；边距：0 自动； .