how to center my text that has background-color of limited width and absolute position - css

Question

Maybe I am trying to much but What I want to do is to put the post title above the featured image on my page. I got it to work by possitioning the text, but of course this stops my page from being a responsive page.
What I am looking for is to have text with a background colour of a certain width (so not spread from left to right) to be automatically centered and in absolute position.
Is this possible?
This is what I have until now:
<style>
.post_title
{
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
position: absolute;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
</style>
Any help would be highly appreciated, I have been looking for the answer for hours now.
Thx!

Answer 1

I'm not sure if I understand your question right, but you can try to put a wrapper around the .post_title, let's say div class="titlewrapper"
Apply styles something like this:
div.titlewrapper {
width:100%;
text-align:center;
}
div.titlewrapper .post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
width:auto;
background-color: #0E0EFF;
display:inline-block;
margin:auto;
padding: 3px;
border-radius: 2px;
}
Does this answer your question?
Groet, Jeroen

Answer 2

Could THIS work for you?
CSS:
.center_title {
margin-left:auto;
margin-right:auto;
}
.post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
HTML
<div class="center_title">
<div class="post_title">test</div>
</div>
Try not to use Positions, only if you really need to!