我发誓我在发布之前已经进行了相当彻底的检查！ 我试图将一个FIXED div放在其父div中。
<div id="main">
<div id="fixed"></div>
</div>
CSS：
#main {
position: relative;
min-width: 400px; /* so it's fluid*/
background: #fff;
height: 100vh;
}
#fixed {
position: fixed;
/* center the div */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
min-height: 10em;
width: 300px;
top: 0;
background-color: #af0000;
}
我想知道是否可以使用纯CSS。我可以计算剩余空间，将其除以2并用JQuery改变LEFT和RIGHT（即左：6px;右：6px;等等），但我想尽可能避免这种情况。
答案 0 :(得分：2)
calc()和vw (viewer width) 我们可以使用CSS的这一强大功能来计算CSS中的测量结果，并结合vw（以及vh）我们可以非常精确和响应地定位元素。
#main {
height: 200vh; /* force scrolling for demo */
}
#fixed {
position: fixed;
width: 300px;
height: 100px;
top: 50px;
left: calc( 50vw - 150px ); /* this is the magic */
background: blue;
}<div id="main">
<div id="fixed"></div>
</div>
在视口滚动之前，...的行为就像一个相对定位的元素......
不幸的是，它是（June 25, '17） less than well supported，但允许我们使用margin: 0 auto;居中，因为#fixed是固定的{{1} }}
widthbody {
margin: 0;
}
#main {
min-width: 400px; /* variable width */
width: 70vw; /* for demo */
height: 200vh;
background: rgba( 0, 255, 0, 0.2 );
}
#fixed {
position: sticky; /* this is the magic */
margin: 0 auto; /* along with this */
width: 300px;
height: 100px;
top: 50px;
background: cadetblue;
}
答案 1 :(得分：2)
$this->name#main {
position: relative;
min-width: 400px;
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#fixed {
position: fixed;
min-height: 10em;
width: 300px;
background-color: #af0000;
}
答案 2 :(得分：1)
编辑回答。
我从Fred's answer. 得到了这个想法，如果它让你更接近你的答案，而不是这个。
除非您出于某种原因使用全屏，否则这似乎无法在下方的查看器中使用。
也许这会让你更接近。
您#main需要position: relative
您的#fixed需要position: sticky以及top: 25% bottom: 25% left: 50% right: 50%
见下面的例子：
/* start eesential CSS */
#main {
display: inline-block;
width: 30%;
min-height: 300vh;
height: auto;
position: relative;
float: right;
}
#fixed {
margin: 0 auto;
position: sticky;
top: 25%;
bottom: 25%;
left: 50%;
right: 50%;
}
/* end eesential CSS */
/* Start style fluff */
body {
margin: 0 auto;
}
#main {
background: darkred;
}
#fixed {
max-width: 100%;
height: 300px;
color: #999;
background: darkblue;
overflow-y: auto;
}
#fixed *,
#none-fixed * {
padding: 25px;
color: #999;
}
/* End style fluff */<div id="main">
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
te ius. Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque
molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet,
an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus,
alia mutat te ius.
</p>
</div>
<div id="fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lore molestiae. Pro mundi nemore at, tation
</p>
</div>
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
a deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium
duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae
cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. te ius.
</p>
</div>
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
te ius.
</p>
</div>
</div>
答案 3 :(得分：0)
这是一个有点愚蠢（但运作良好，与上面提到的所有纯CSS解决方案不同 - 这是一个跨浏览器的解决方案）与JQuery相关的解决方案：
// getting initial data
var fixed = $('#fixed').width();;
var main = $('#main').width();
// getting left offset
var leftSpace = $('#main').offset().left;
// caltucating difference, dividing by two and adding left margin
var diff = (main - fixed) / 2 + leftSpace;
// updating CSS
$('#fixed').css('left', diff);