Center H2 slightly above it's parent div? - css

Question

I am trying to position a styled heading to be centered and to sit slightly above it's parent div. I assumed the heading would have to be absolutely positioned to be able to be shifted outside of the parent by adding a negative margin to the top. I can center it when it's position is relative, but I can not add a negative margin to bring it outside of the parent.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2 class="content-box-title">A Heading</h2>
<div class="content-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, culpa illum! Sint maiores numquam provident, consequatur voluptatibus, repudiandae, dolorum sed, itaque saepe magni fugit mollitia! Repellat dignissimos, quas esse itaque.</p>
</div>
</div>
</div>
</div>
</div>
CSS
.content {
position: relative;
background-color: #d5d5d5;
}
.content-box-title {
position: absolute;
background-color: grey;
text-align: center;
padding: 10px;
margin: -40px auto;
}
.content-body {
padding: 20px;
}
http://jsfiddle.net/LsohxL3m/

Answer 1

By making the title an inline-block, you can center it using text-align: center on the parent div. You don't need absolute positioning or auto margin then, so you can just use a negative top margin. You can use text-align left on the content to keep that left aligned:
.content {
background-color: #d5d5d5;
text-align: center;
}
.content-box-title {
display: inline-block;
background-color: grey;
text-align: center;
padding: 10px;
margin-top: -40px;
}
.content-body {
padding: 20px;
text-align: left;
}
Here's a fiddle.

Answer 2

I adjusted that fiddle to include this css content:
.content h2 {
box-sizing: border-box;
margin: -60px auto 0;
width: 100%;
}
an it seemed to center the h2 and set it just a bit above the content div.
but after deeper investigation, it looks like you just need to as a width to your original tag, and the box-sizing rule to assist with the padding/margin on the element.
I appended this to your existing .content-box-title css and it worked fine:
width: 100%;
box-sizing: border-box;

Answer 3

Check now: http://jsfiddle.net/LsohxL3m/1/
I changed the styling of the title as follows:
.content-box-title {
background-color: grey;
text-align: center;
padding: 10px;
margin-top: -40px;
margin-left: auto;
margin-right: auto;
}

Answer 4

You can use translate:
.content-box-title {
position: absolute;
background-color: grey;
text-align: center;
padding: 10px;
margin-top: -40px;
left:50%;
transform: translate(-50%, 0);
}
http://jsfiddle.net/LsohxL3m/6/

Answer 5

change
.content-box-title {
position: absolute;
background-color: grey;
text-align: center;
padding: 10px;
margin: -40px auto;
}
.content-body {
padding: 20px;
}
to
.content-box-title {
transform: translateY(-60px);
background-color: grey;
margin-top: 60px;
text-align: center;
padding: 10px;
}
.content-body {
padding: 0 20px 20px 20px;
}
Here is a sample