居中位置：固定元素
我想制作一个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在屏幕上将此框居中？
第2267篇《居中位置：固定元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
我只用这样的东西：
.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。）
尝试将其用于无法正确居中的水平元素。
宽度：calc（宽度：100％- 宽度，无论其他位置是否居中）
例如，如果您的侧面导航栏为200px：
width: calc(100% - 200px);
一个可能的答案：
<!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>
要固定位置，请使用此：-
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
我使用了vw（视口宽度）和vh（视口高度）。视口就是您的整个屏幕。100vw是屏幕的总宽度，100vh是总高度。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
您基本上可以将其包装到另一个中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>#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
里面可以是任何宽度，高度不同或不同的不同元素。全部都居中。
此解决方案不需要您为弹出div定义宽度和高度。
而不是计算弹出窗口的大小，而是减去一半到顶部，javascript调整了popupContainer的大小以填满整个屏幕...
（高度为100％，在使用display：table-cell时不起作用；（需要将其垂直居中对齐））...
无论如何它:)
或仅在原始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中正常运行（无论如何，您当然应该拥有它。.！）
添加类似的容器：
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
然后将您的盒子放入此div中即可完成工作。
只需添加：
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
相似问题
问题类别
唯一的安全解决方案是使用表align = center，如下所示：
我不敢相信全世界的人们都将大量的时间浪费在愚蠢的时间上，以解决诸如以div为中心的根本问题。css解决方案不适用于所有浏览器，jquery解决方案是一种软件计算解决方案，由于其他原因而不是一种选择。
I have wasted too much time repeatedly to avoid using table, but experience tell me to stop fighting it. Use table for centering div. Works all the time in all browsers! Never worry any more.