Question

我想放置vertical-align：middle这个词。（在缩放浏览器时始终位于div的中间）。我已经尝试了很多方法，但是在扩展时未能将其保持在中间位置。我怎么能这样做？

<div class="word">
    <h1>Hello!!</h1>
</div>

Answer 1

我不确定您是否希望内容垂直和水平居中。我在CSS中做了笔记。

您可以使用flexbox：

＆＃13;

.word {
  height:300px; /* this is just for the example - it can be any height */
  display: flex;
  align-items: center;
  justify-content: center; /* horizontal centering. you can also use flex-start or flex-end */
  background:salmon; /* just to help show that it's working. */
}

＆＃13;

<div class="word">
 <h1>Hello!!</h1>

</div>

＆＃13;

或者，如果父元素具有已定义的高度，.words可以是其中的一定百分比。 Here's a working example in jsFiddle

＆＃13;

html,
body {
  /* This is just for the example - use whatever parent element. */
  height: 100%;
  /* The height doesn't have to be a percentage. */
}

.word {
  height: 100%;
  /* this is just for the example - it can be any height */
  display: flex;
  align-items: center;
  justify-content: center;
  /* horizontal centering. you can also use flex-start or flex-end */
  background: salmon;
  /* just to help show that it's working. */
}

＆＃13;

<div class="word">
  <h1>Hello!!</h1>
</div>

＆＃13;

Answer 2

您可以尝试这种基本方法：

＆＃13;

    .word {
        height: 90px;
        background: #000;
        color: #FFF;
        line-height: 90px;
    }
    h1{
      font-size:5.9vw;
    }

＆＃13;

  <div class="word">
     <h1>Hello!!</h1>
  </div>

＆＃13;

Answer 3

您好我尝试使用以下代码，它完全符合您的要求，我希望这对您有所帮助。

  .word {
        position: relative;
        width: 100%;float: left;
        height: 90px;
        background: #000;
        color: #FFF;
        line-height: 90px;
     }
    .word  h1{
      font-size:5.9vw;
      position: absolute;
      left: 50%;
      top: 50%;
      width: auto;
      margin: 0px;
      transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      -o-transform:translate(-50%, -50%);
      -ms-transform:translate(-50%, -50%);
    }

  <div class="word">
     <h1>Hello!!</h1>
  </div>

第二种方法也可以改变css代码，如下所示

 .word {
    position: relative;
    width: 100%;
    float: left;
    height: 90px;
    background: #000;
    color: #FFF;
    line-height: 90px;
    display: table;
}
.word h1{
  font-size:5.9vw;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

Answer 4

对于margin:auto，你也可以在子元素上使用.word { height:300px; /* this is just for the example - it can be any height */ display: flex; background:salmon; /* just to help show that it's working. */ } .word h1{ margin:auto; }。

<div class="word">
 <h1>Hello!!</h1>

</div>

{{1}}

CSS字垂直刻度

4 个答案: