Question

我正在努力将我的H1标签集中在我的主标签中。如果我使用固定顶部的位置：50％和左边：50％，它可以工作一点，虽然我永远不能将它居中到中间。没有别的办法。有什么建议吗？

＆＃13;

main .container {
  margin-top: 40%; }
  main .container .row h1 {
    text-align: center !important; }

＆＃13;

<main>
        <div class="container">
            <div class="row">
                <h1>WELCOME</h1>
            </div>
        </div>
    </main>

＆＃13;

导航栏或html等其他元素是否可以与此相互干扰？我的html也有这个属性：

＆＃13;

html {
  min-height: 100%;
  background-size: cover;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)),
  url("/static/images/background.png") no-repeat fixed center center;
}

＆＃13;

对我而言，它的呈现方式如下：https://i.imgur.com/tHYQpNg.jpg

Answer 1

尝试以下操作，希望这会有所帮助：

＆＃13;

main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<main>
        <div class="container">
            <div class="row">
                <h1>WELCOME</h1>
            </div>
        </div>
    </main>

＆＃13;

Answer 2

试试这个。

＆＃13;

.centered-div {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 0;
    margin-left: 0;
    transform: translate(-50%, -50%);
}

＆＃13;

<main>
    <div class="container">
        <div class="row centered-div">
            <h1>WELCOME</h1>
        </div>
    </div>
</main>

＆＃13;

Answer 3

您还应该为容器指定高度值。

例如;

＆＃13;

main .container {
  margin-top: 45%;
  height: 10%;
  margin-bottom:45% }
  main .container .row h1 {
    text-align: center !important; }

＆＃13;

<main>
        <div class="container">
            <div class="row">
                <h1>WELCOME</h1>
            </div>
        </div>
    </main>

＆＃13;

应该按照你的意愿工作。您可以相应地更改％值以更好地更改文本的位置。要小心，使它们总计100％。

编辑：虽然塞尔吉奥的答案更好。

Answer 4

试试这个：

html, body, main, .container, .row{
  height:100%;
}

.row{
  display:flex;
  justify-content:center;
  align-items:center;
}

<main>
        <div class="container">
            <div class="row">
                <h1>WELCOME</h1>
            </div>
        </div>
    </main>

不能将h1置于主标签内

4 个答案: