HTML - 居中固定元素并提供父元素的宽度

Question

我想将一个固定的 div 在其父元素中居中。固定 div 的宽度应具有其父级的宽度。但是它不起作用，有什么问题吗？

js fiddle

HTML

<div class="container">
 <div class="wrap">
    <div class="center" >
            centered      
    </div>
 </div>
</div>

CSS

.container {
position: relative;
width: 300px;
height: 400px;
border:solid;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

.wrap {
height: 800px;
width: 100%;
position: relative;
text-align: center;
}

.center{
background: red;
position:  fixed;
bottom: 100px;
width: inherit;  
}

Answer 1

改变.wrap的宽度:

.wrap {
    height: 800px;
    width: inherit;
    position: relative;
    text-align: center;
}