Centering a FIXED div inside its "parent" - css

Question

I swear I have checked quite thoroughly before posting this!
I am trying to center a FIXED div inside its parent 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;
}
I wonder if it s possible to do with pure CSS. I can calculate the remaining space, divide it by two and change LEFT and RIGHT (i.e left: 6px; right: 6px; etc..) with JQuery but I'd like to avoid that if possible.
http://jsfiddle.net/PvfFy/980/

Answer 1

CSS calc() and vw (viewer width)
We can calculate measurements in CSS using this powerful addition to CSS, and combined with vw (and also vh) we can position elements quite precisely and responsively.
#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>
Since question was clarified (sorry for not paying closer attention)
Using position: sticky:
...will behave just like a relatively positioned element until the viewport scrolls...
Unfortunately it is (June 25, '17) less than well supported, but allows us to use margin: 0 auto; centering since #fixed is of a fixed width.
body {
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;
}
<div id="main">
<div id="fixed"></div>
</div>

Answer 2

#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;
}
<div id="main">
<div id="fixed"></div>
</div>

Answer 3

Edited answer.
I got this idea from Fred's answer. if it brings you closer go upvote his answer and not this one.
This doesn't seem to work in the viewer below unless you use fullscreen for some reason.
Maybe this will bring you closer.
You #main needs position: relative
And your #fixed needs position: sticky As well as top: 25% bottom: 25% left: 50% right: 50%
See example below:
/* 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>

Answer 4

Here is a slightly silly (but working well and, unlike all the mentioned above pure CSS solutions- this one is a cross-browser one) solution with JQuery involved:
// 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);
http://jsfiddle.net/PvfFy/983/