中心位置:固定元素

我想做一个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?

797911 次浏览
小开
最佳答案

如果你的div有一个已知的宽度和高度，那么你基本上需要设置top和left到50%，以使div的左上角居中。你还需要设置margin-top和margin-left到div的高度和宽度的负一半，以将中心移到div的中间。

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

或者，如果你的div有一个动态的/未定义的宽度和/或高度，那么不是margin，而是将transform设置为div相对宽度和高度的负一半。

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

或者，如果你的div至少有一个固定的宽度，你不关心垂直居中和旧的浏览器，如IE6/7，那么你也可以添加left: 0和right: 0的元素有margin-left和margin-right的auto，这样有固定宽度的固定定位元素知道它的左右偏移量从哪里开始。在你的情况下:

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

同样，如果你关心IE的话，这个功能只能在IE8+中工作，而且只能在水平方向上，而不是垂直方向上。

小开

或者只是在原始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中正确地运行(你当然应该有无论如何..!)

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

这个解决方案不需要你为弹出式div定义宽度和高度。

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

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

(100%高度，使用display:table-cell时不起作用;(需要将某物垂直居中))…

不管怎样，它是有效的:)

小开

添加一个这样的容器:

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

加上外部div的left: 0; right:0;和text-align: center，这将使内部div居中对齐，而不显式地指定内部div的宽度。

小开

唯一可靠的解决方案是使用表align=center，如下所示:

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

我无法相信世界各地的人们浪费这么多愚蠢的时间来解决这样一个基本的问题，如集中一个div. css解决方案并不适用于所有浏览器，jquery解决方案是一个软件计算解决方案，并不是一个其他原因的选择。

我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再这样做了。使用表格为div居中。在所有浏览器中都有效!再也不用担心了。

小开

一个可能的回答:

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

我想让一个弹出框的中心与动态宽度和高度的屏幕。

这是一个现代的方法，水平居中一个动态宽度的元素-它在所有现代浏览器;# EYZ0。

更新示例 .

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

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

更新示例 .

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

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

小开

试着用这个方法来处理水平元素的居中不正确。

width: calc (width: 100% - 宽度也就是它的中心)

例如，如果你的侧导航栏是200px:

width: calc(100% - 200px);
小开

添加:

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

你可以将它包装到另一个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>

小开

要确定位置，请使用以下命令:

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

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

.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
小开 
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
其中

可以是任何具有diffenet宽度，高度或没有的元素。

.

.
小开

我就用这样的方法:

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

小开

这个方法对我来说效果最好:

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

很简单，试试这个

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

当你不知道你正在居中的东西的大小，而你想让它在所有屏幕尺寸中居中时，这个方法非常有效:

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

中心固定位置元素
(简单的&我知道的最好的方式)

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%));

这两种方法都不会限制居中元素的宽度小于视口宽度，当在flexbox中使用边缘时，在居中元素内部

小开

我用的方法很简单。例如，我有一个导航条，它是position : fixed，所以我调整它，在边缘留下一个小空间，像这样。

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

其思想是取宽度的剩余百分比“;在本例中为2%”;用它的一半。

小开

遇到这个问题，所以我得出结论，使用(隐形的)容器是最好的选择(基于@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)

fixed centered alert

小开

属性为的div的中心元素

# EYZ0

Html和Css代码

.jqbox_innerhtml {
position: fixed;
width:100%;
height:100%;
display: flex;
justify-content: space-around;
align-items: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>

小开

另一个简单的解决方案是将元素的width设置为fit-content，将left和right设置为0px;

width: fit-content;
position: fixed;
left: 0px;
right: 0px;

如果您不知道元素的宽度，这是很有用的。


提交答案