Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue?
Check out this example on jsFiddle
Here is the HTML code:
<div class="container">
<div class="wrap">
<div class="center" >
Text that should be centered
</div>
</div>
</div>
And here is the CSS code:
.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;
}