Centered responsive text - html

Question

I have a jsfiddle here - http://jsfiddle.net/kw83kLmo/
It's justs a block of text that I need to center in the window.
The text needs a set width because I don't want it to be the full width of the container.
When the window gets smaller the text needs to stay in the center but get narrower.
In the example here it stays centered and responds until it get's to 600px then just stays that width.
I know I have set that width but I did that to center it
<div class="container-fluid ">
<div class="hero">
<div class="hero_heading text-center">
<h1>This is a heading This is a heading This is a heading </h1>
</div>
</div>
</div>

Answer 1

Update your h1 style like below.
.hero_heading h1 {
border: 1px solid red;
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
max-width: 600px;
}
DEMO

Answer 2

Edit on your code
.hero_heading h1{
border: 1px solid red;
color: white;
//top: 0; left: 0; bottom: 0; right: 0;
width: 600px;/*added*/
max-width:80%;/*to leave spaces around your text on responsive*/
margin:auto;/*changed*/
}
You no need to position your element for making it unless if you need
NOTE: Remove your position:relative; from .hero
DEMO

Answer 3

Edit your code like this :
.hero_heading h1{
border: 1px solid red;
color: white;
margin: 0 auto;
max-width: 600px;
position: absolute;
bottom: 0;
}
Demo

Answer 4

JSfiddle Demo
I took the positioning off the h1 and put it on the wrapping div.
CSS
.hero{
background-image: url(http://placehold.it/800x300);
background-size: cover;
position: relative;
height: 400px;
}
.hero_heading {
border: 1px solid red;
color: white;
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
max-width: 600px;
}

Answer 5

I'd go with:
.hero_heading{
border: 1px solid red;
color: white;
position: absolute;
width:50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Answer 6

CSS flex can do the magic for you in a compatible way across most popular browsers including IE. Take a look at this JSFiddle
.hero{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url(http://placehold.it/800x300);
background-size: cover;
height: 400px;
}
.hero_heading h1{
border: 1px solid red;
color: white;
max-width: 600px;
}