Question

我试图让我的标题保持在页面中间，无论我在哪个窗口大小。

我尝试过使用Bootstrap。

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <h1 class=" section-title ">StackOverflow</h1>
    </div>
</div>

此外，这个CSS。

.section-title {
    margin-left:auto;
    margin-right;auto;
}

然后，当我缩小窗户时，我的标题会一直向左移动。我怎么阻止它？最好的方法是什么？

My Fiddle is here - 如果你需要的话。

Answer 1

您应该将;替换为:。也到死点：

html, body {height: 100%; width: 100%;}
h1 {text-align: center; display: inline-block; vertical-align: middle;}
.center {position: absolute; top: 0; left: 0; right: 0; left: 0; text-align: center; border: 1px solid #ccc; height: 100%; width: 100%; vertical-align: middle;}

<div class="center">
  <h1>Centered</h1>
</div>

Answer 2

如果您只需要将文本居中。

＆＃13;

h1 {
    text-align: center;
    border: 1px solid red;
}

＆＃13;

<h1>Hello</h1>

＆＃13;

如果您还想将元素本身居中。

＆＃13;

h1 {
    display: table;
    margin: 0 auto;
    border: 1px solid red;
}

＆＃13;

<h1>Hello</h1>

＆＃13;

观看两个演示之间的边界差异。

使文字保持在所有屏幕尺寸的页面中间/中心？

2 个答案: