居中位置：固定元素

439

我想制作一个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

— 土神
source

606

您基本上需要设置 top div 并将left其50%居中放置在div的左上角。您还需要将margin-top和设置为margin-leftdiv的高度和宽度的负一半，以将中心移到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的auto，使得具有固定宽度的固定定位的元素知道在哪里的左，右偏移开始。因此，在您的情况下：

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

— BalusC
source

8

我在css-tricks.com/…中发现了这个技巧。但是，当我更改宽度和高度时，它不会移动中心。是的，更改高度和宽度时，我应该更改左边距和顶部。

— saturngod 2010年

2

仅供参考：这将正确地将内容放置在中间，但是不幸的是，您丢失了滚动条-即使滚动，也无法访问视口剪切掉的任何内容，因为固定位置基于视口，而不是视口页。到目前为止，我发现的唯一解决方案是使用javascript。

— Groxx 2011年

3

Groxx我认为您可以使用溢出属性将滚动条放在弹出窗口的div中。

— David Winiecki 2012年

1

此外，对于这一步，您需要知道元素的宽度。

— 赫克托·奥多涅兹2014年

2

啊。nm如果是这样的话，我的意思是当然浏览器的大小将是动态的，不确定为什么会这样。相反，我认为他的意思是弹出窗口的尺寸必须动态。多数民众赞成在我这样的情况下，我使用转换：翻译（-50％，-50％）；除了不在IE8上运行之外，其他都非常有用。

— 夜

324

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

这是一种使元素具有动态宽度水平居中的现代方法-它适用于所有现代浏览器；支持可以在这里看到。

更新示例

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

对于垂直居中和水平居中，都可以使用以下方法：

更新示例

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

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

— 乔什·克罗泽（Josh Crozier）
source

1

我正在使用这种方法将宽度大于窗口宽度的固定位置的图像水平居中，并且在当前的Firefox，Chrome，IE 11和Edge版本中至少可以正常工作。

— jelhan

1

在我的测试中，这很不错（在前缀后面），Win10 Edge 14，Win7 IE9 +，Win10 Chrome，OSX Chrome，iPad4 Chrome和Safari，Android 4.4+ Chrome。对我而言唯一失败的是未发生翻译的Android 4.0。

— danjah

2

@ahnbizcad，它适用于台式机浏览器（例如Chrome 61，Safari 11和FireFox 65），但不适用于Android 6上的Chrome 61，接受的答案适用于所有浏览器。

— 艾里克·巴克

5

这会使Chrome中的图像模糊。

— Tomasz P. Szynalski

1

我的img仅能以某种方式在所有浏览器上正常工作。谢谢一群！

— Kugelfisch，

136

或仅在原始CSS中添加left: 0和right: 0，这使其行为与常规的非固定元素相似，并且通常使用自动边距技术：

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

— 威尔·普雷斯科特
source

2

凭什么？父元素是body元素，没有边框。如果将边框属性添加到主体（？！），则可以确定它会受到影响，就像我想象的50％技术一样。我向您保证，它可以使用给定的参数正常工作，并且可以在我方便使用的每个浏览器中进行验证，并且具有不依赖于元素宽度的附加好处。

— Will Prescott 2010年

5

我所做的就是将这2个属性和一个doctype添加到OP的示例HTML中。但是，在进一步测试中，似乎是IE7（或在兼容模式下为8）是问题- right如果left还设置了属性，则似乎不尊重该属性的值！（msdn.microsoft.com/en-us/library/…指出，left并且right在IE7中仅具有“部分”支持）。好吧，我承认，如果对IE7的支持很重要，那么该解决方案就不好了，但是对于未来来说，这是一个值得记住的绝妙技巧：）

— Will Prescott 2010年

7

这应该是公认的答案。我有两个固定位置，一个用于不透明蒙版，另一个用于模态。这是我可以将固定位置模态放在屏幕中心的唯一方法。很棒的答案谁会想到？

— 克里斯·霍克斯

3

我同意，这应该是公认的答案。它也不受响应宽度的影响，因此在响应式设计中也能完美工作。

— 赫克托·奥多内斯

7

我建议简化答案，因为某些CSS仅与OP相关。您所需要的只是位置：固定；左：0；正确：0；保证金：0自动; 。

— 赫克托·奥多涅兹2014年

23

添加类似的容器：

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

然后将您的盒子放到该div中即可完成工作。

— Romulus Urakagi蔡
source

“ text-align：center”对我将内部div居中不起作用。

— 尼玛

2

内部盒子需要display: inline-block这个才能起作用。（某些其他显示值也可能会起作用，例如table。）

— Brilliand13年

解决上述CSS的更好方法是在或中添加margin:auto;和更改宽度。那么内容可以是纯文本，块元素或内联元素。width:50%width:400px

— 约书亚伯恩斯

20

只需添加：

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

— 鲍勃
source

1

这不适用于position: fixed，这是问题所在。如果我写错了，请修改您的答案以包含可运行的代码段。

— Flimm '18

1

固定位置时效果很好。

— Phuhui

1

position: fixed只要将max-width或width设置为元素，它就可以使用。

— Js Lim

7

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

里面可以是任何宽度，高度不同或不同的不同元素。全部都居中。

— praffessorr
source

5

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

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

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

（高度为100％，在使用display：table-cell时不起作用；（需要将其垂直居中对齐））...

无论如何它:)

— BjarkeCK
source

4

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

— 刺刀
source

您介意编辑答案以包括整个解决方案吗？

— Flimm

没有左侧和右侧的自动边距，这将无法工作。

— RoM4iK

2

您基本上可以将其包装到另一个中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>

展开摘要

— 阿卜杜拉·迪沙德（Abdulla Dlshad）
source

2

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

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

— Aseem
source

1

要固定位置，请使用以下命令：

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

— 头尾
source

3

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

— Shekhar Chikara

0

一个可能的答案：

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

— 马丁·瓦希
source

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

— Flimm '18 -4-10

0

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

宽度：calc（宽度：100％- 宽度，无论其他偏离中心）

例如，如果您的侧面导航栏为200px：

width: calc(100% - 200px);

— 罗伯特·罗斯
source

0

我只用这样的东西：

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

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

如果您仍需要为calc()不支持CSS自定义属性的浏览器提供支持（请选中caniuse），则不是一种选择。

— 法比恩·斯诺瓦特（Fabien Snauwaert）
source

0

这个最适合我：

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

— 蓬松的
source

-13

唯一的安全解决方案是使用表align = center，如下所示：

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

我不敢相信全世界的人们都将大量的时间浪费在愚蠢的时间上，以解决诸如以div为中心的根本问题。css解决方案不适用于所有浏览器，jquery解决方案是一种软件计算解决方案，并且由于其他原因也不可选项。

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

— ong
source

11

这根本无法回答问题。没有非CSS等效于position:fixed。

— Brilliand