Html 居中响应文本

我这里有一个JSFIDLE-

这只是一块文本，我需要在窗口中居中

文本需要设置宽度，因为我不希望它是容器的全宽

当窗口变小时，文本需要保持在中间，但会变窄

在这里的示例中，它保持居中并响应，直到达到600px，然后保持该宽度

我知道我已经设置了宽度，但我这样做是为了使它居中

<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>

这是一个标题这是一个标题这是一个标题

更新您的

h1

样式，如下所示

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

编辑您的代码

.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*/
}

除非需要，否则不需要定位元素来制作它

注意：删除您的

位置：相对来自
.hero

按如下方式编辑代码：

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


我从
h1
上取下定位，放在包装袋上

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;
}

我同意：

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

CSS flex可以在包括IE在内的大多数流行浏览器中以兼容的方式为您发挥神奇的作用

有什么理由使用绝对定位吗？在这种情况下，也可以保留绝对位置。我对它进行了测试，但因为我的答案是上面的，所以我将只对它进行评论：）
.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;
}