CSS 单词垂直比例

Question

我想放置单词vertical-align:middle。（缩放浏览器时总是在 div 中间）。我尝试了很多方法，但在缩放时未能将其保持在中间。我该怎么做？

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

Answer 1

我不确定您是否希望内容在垂直和水平方向上都居中。我在 CSS.

中做了笔记

你可以使用 flexbox：

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

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

</div>

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

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

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

Answer 2

您可以试试这个基本方法：

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

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

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

对于display:flex，您还可以在子元素上使用 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>

CSS 单词垂直比例

CSS word vertical scale

html

css

word

scale