CSS 居中位置：固定元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2005954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a position:fixed element
提问by saturngod
I would like to make a position: fixed;popup box centered to the screen with a dynamic width and height. I used margin: 5% auto;for this. Without position: fixed;it centers fine horizontally, but not vertically. After adding position: fixed;, it's even not centering horizontally.
我想制作一个position: fixed;以动态宽度和高度为中心的弹出框。我用过margin: 5% auto;这个。没有position: fixed;它水平居中，但垂直居中。添加后position: fixed;，它甚至没有水平居中。
Here's the complete set:
这是完整的集合：
.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>How do I center this box in screen with CSS?
如何使用 CSS 在屏幕中居中此框？
回答by BalusC
You basically need to set topand leftto 50%to center the left-top corner of the div. You also need to set the margin-topand margin-leftto the negative half of the div's height and width to shift the center towards the middle of the div.
基本上，您需要设置top并left以50%居中div的左上角。您还需要将margin-top和设置为margin-leftdiv 高度和宽度的负半部分，以将中心移向 div 的中间。
Thus, provided a <!DOCTYPE html>(standards mode), this should do:
因此，提供一个<!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. */
Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0and right: 0to the element having a margin-leftand margin-rightof auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:
或者，如果您不关心垂直居中和旧浏览器（例如 IE6/7），那么您也可以将left: 0and添加right: 0到具有margin-leftand margin-rightof的元素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;
Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.
同样，如果您关心 IE，这仅适用于 IE8+，并且仅水平居中而非垂直居中。
回答by Josh Crozier
I want to make a popup box centered to the screen with dynamic width and height.
我想用动态宽度和高度制作一个以屏幕为中心的弹出框。
Here is a modern approach for horizontally centering an element with a dynamic width - it works in all modern browsers; support can be seen here.
这是一种将具有动态宽度的元素水平居中的现代方法 - 它适用于所有现代浏览器；支持可以在这里看到。
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
For both vertical and horizontal centering you could use the following:
对于垂直和水平居中，您可以使用以下内容：
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You may wish to add in more vendor prefixed properties too (see the examples).
您可能还希望添加更多供应商前缀的属性（参见示例）。
回答by Will Prescott
Or just add left: 0and right: 0to your original CSS, which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works:
或者只是将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;
}
Note you need to use a valid (X)HTML DOCTYPEfor it to behave correctly in IE (which you should of course have anyway..!)
请注意，您需要使用有效的 (X)HTMLDOCTYPE才能使其在 IE 中正确运行（无论如何您当然应该拥有它......！）
回答by Romulus Urakagi Ts'ai
Add a container like:
添加一个容器，如：
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Then put your box into this div will do the work.
然后把你的盒子放到这个 div 中就可以了。
回答by Bob
Just add:
只需添加：
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
回答by praffessorr
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
inside it can be any element with diffenet width, height or without. all are centered.
在它里面可以是任何具有不同宽度、高度或没有不同的元素。一切都在中心。
回答by BjarkeCK
This solution does not require of you to define a width and height to your popup div.
此解决方案不需要您为弹出 div 定义宽度和高度。
And instead of calculating the size of the popup, and minus half to the top, javascript is resizeing the popupContainer to fill out the whole screen...
而不是计算弹出窗口的大小，并减去顶部的一半，javascript 正在调整 popupContainer 的大小以填满整个屏幕......
(100% height, does not work when useing display:table-cell; (wich is required to center something vertically))...
（100% 高度，在使用 display:table-cell 时不起作用；（需要将某些东西垂直居中））...
Anyway it works :)
无论如何它有效:)
回答by jatinder
left: 0;
right: 0;
Was not working under IE7.
不能在 IE7 下工作。
Changed to
变成
left:auto;
right:auto;
Started working but in the rest browsers it stop working! So used this way for IE7 below
开始工作，但在其他浏览器中它停止工作！所以在下面的IE7中使用这种方式
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
回答by Abdulla Dlshad
You can basically wrap it into another divand set its positionto fixed.
您基本上可以将它包装成另一个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>回答by Aseem
I used vw(viewport width) and vh(viewport height). viewport is your entire screen. 100vwis your screens total width and 100vhis total height.
我使用了vw（视口宽度）和vh（视口高度）。视口是你的整个屏幕。100vw是您的屏幕总宽度和100vh总高度。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
