527

我想制作一个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 在屏幕中居中此框?

4

21 回答 21

706

您基本上需要设置top和居中 divleft50%左上角。您还需要将 and 设置margin-topmargin-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),那么您也可以将 and 添加left: 0right: 0具有margin-leftandmargin-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+,并且仅水平居中而不是垂直居中。

于 2010-01-05T12:39:37.293 回答
446

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

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

更新示例

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

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

更新示例

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

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

于 2014-09-14T02:25:12.693 回答
142

或者只是将left: 0and添加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)HTMLDOCTYPE以使其在 IE 中正常运行(无论如何,您当然应该拥有它..!)

于 2010-01-05T12:53:16.200 回答
30

添加一个容器,如:

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

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

编辑:如评论中所述,内部内容需要设置为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;
    }

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

于 2012-07-14T12:47:46.400 回答
23

只需添加:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
于 2017-03-08T05:43:44.853 回答
15

中心固定位置元件

当在居中元素内的 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%));
于 2021-01-13T01:44:11.663 回答
11
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

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

于 2019-05-01T14:02:58.563 回答
5
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'});
}
于 2011-12-22T10:29:21.260 回答
5

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

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

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

(100% 高度,在使用 display:table-cell 时不起作用;(需要将某些东西垂直居中))...

无论如何它有效:)

于 2012-03-07T19:27:21.427 回答
4

我使用vw(视口宽度)和vh(视口高度)。视口是您的整个屏幕。100vw是您的屏幕总宽度,100vh是总高度。

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
于 2019-04-04T21:20:24.263 回答
3

这个最适合我:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
于 2020-05-08T19:54:39.433 回答
2

您基本上可以将其包装成另一个div并将其设置positionfixed.

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

于 2017-11-11T19:18:04.127 回答
2

我只是使用这样的东西:

.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。)

于 2019-12-13T12:50:30.580 回答
2

简单,试试这个

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;
于 2020-07-13T13:54:40.043 回答
1

要固定位置,请使用:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
于 2018-09-27T14:53:03.983 回答
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>
于 2013-08-05T03:11:16.197 回答
0

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

宽度:计算(宽度:100% -宽度其他任何偏离中心的宽度

例如,如果您的侧边导航栏是 200px:

width: calc(100% - 200px);
于 2017-01-07T16:58:20.653 回答
0

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

.modal {
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;           /* (100 - height) / 2 */
  left: 5%;          /* (100 - width) / 2 */
}
于 2020-07-26T23:43:06.550 回答
0

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

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

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

于 2021-01-28T18:47:03.927 回答
0

有这个问题所以我得出结论,使用(不可见的)容器是最好的选择(基于答案@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)

固定居中警报

于 2021-10-23T09:38:17.447 回答
-15

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

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

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

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

于 2013-05-10T14:53:33.683 回答