Center one fixed 'arrow' element inside another fixed 'circle' element - html

Question

I am having trouble centering the arrow inside the red circle.
How can I center one fixed element inside another fixed element?
JsFiddle: https://jsfiddle.net/sebastian3495/xtj9cga2/4/
Code
html, body {
height: 1000px;
width: 100%;
}
#a {
width: 100%;
height: 100%;
border: 1px solid black;
position:relative;
}
#wrapper {
position: absolute;
top: 50vh;
}
#b {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
position: fixed;
}
#c {
border: solid black;
border-width: 0 3px 3px 0;
position: fixed;
width: 50px;
height: 50px;
transform: rotate(-45deg);
}
<div id="a">
<div id="wrapper">
<i id="b"></i>
<i id="c"></i>
</div>
</div>

Answer 1

You can simply your code like below then you can easily center your arrow and also adjust the dimension:
.arrow {
background:red;
width:100px;
height:100px;
border-radius:50%;
position:fixed;
top:100px;
left:50px;
}
.arrow::before {
content:"";
position:absolute;
top:50%;
left:50%;
width:50%;
height:50%;
border-top:3px solid;
border-right:3px solid;
/*75% instead of 50% since we need to center half the shape so 50% then 25%*/
transform:translate(-75%,-50%) rotate(45deg);
}
<div class="arrow"></div>
You can still simplify more without pseudo element:
.arrow {
width:100px;
height:100px;
padding:35px 35px 0 0;
border-radius:50%;
position:fixed;
top:100px;
left:50px;
background:
linear-gradient(#000,#000) top right/77% 3px,
linear-gradient(#000,#000) top right/3px 77%,
red;
background-repeat:no-repeat;
background-origin:content-box;
transform:rotate(45deg);
box-sizing:border-box;
}
<div class="arrow"></div>

Answer 2

adjust top and left position for i tag with id="c"
#c {
border: solid black;
border-width: 0 3px 3px 0;
position: fixed;
width: 50px;
height: 50px;
left:3%;
top:60vh;
transform: rotate(-45deg);
}