为什么时钟的h1标签没有完全垂直居中

Question

我正在研究一个番茄钟，显示时钟定时器的h1标签不是垂直居中的（页面中心）。如何在不丢失水平对齐的情况下将文本垂直居中？此外，如果有人可以建议我怎样才能将控件内的 - （减号）和+（加号）符号放在靠近中间位置而不移动文本。

＆＃13;

＆＃13;

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 30px;
}

.container {
  text-align: center;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.clockContainer {
  position: relative;
  text-align: center;
}

.timer {
  margin: 0 50px;
  margin-top: 70px;
  text-align: center;
  border: solid black 1px;
  font-size: 44px;
  width: 500px;
  height: 200px;
  display: inline-block;
}

.controlContainer {
  position: absolute;
  text-align: center;
  width: 100px;
  display: inline-block;
}

.control {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: solid black 1px;
  text-align: center;
  margin-bottom: 20px;
}

.button {
  margin-top: 30px;
}

.hide {
  display: none;
}

.time {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}

.ticker {
  display: inline-block;
  font-size: 30px;
  margin-top: 0px;
}

.minus {
  margin-right: 10px;
}

.plus {
  margin-left: 10px;
}

＆＃13;

<div class="container">
  <!-- header title -->
  <div class="title primary-text">
    <h1>Pomodoro Clock</h1>
  </div>
  <!-- clock container -->
  <div class="clockContainer">
    <h2>Session</h2>
    <!-- timer / clock -->
    <div class="timer">
      <h1 class="display">23:59</h1>
    </div>
    <!-- this section for controlling clock -->
    <div class="controlContainer">
      <div class="control">
        <div class="button title">Start</div>
        <div class="button hide title">Stop</div>
      </div>
      <div class="control">
        <h3 class="time">30</h3>
        <h3 class="title work">Work</h3>
        <h3 class="minWork ticker minus">-</h3>
        <h3 class="plusWork ticker plus">+</h3>
      </div>
      <div class="control">
        <h3 class="time">10</h3>
        <h3 class="title break">Break</h3>
        <h3 class="minBrake ticker minus">-</h3>
        <h3 class="plusBrake ticker plus">+</h3>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题并不完全清楚，但请尝试将其应用于元素：

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

h1 {
  vertical-align: middle;
}

这将使h1与你想要的方式保持一致。

Answer 3

只需将height的{​​{1}}移至中心.timer即可。由于固定h1，height未居中，因为它大于h1。如果您希望减少200px height，只需减少.timer h1和margin-top。

将margin-bottom和+更接近-的中间减少margin-top值（例如从.ticker到0）。演示：

＆＃13;

＆＃13;

-5px

＆＃13;

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 30px;
}

.container {
  text-align: center;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.clockContainer {
  position: relative;
  text-align: center;
}

.timer {
  margin: 0 50px;
  margin-top: 70px;
  text-align: center;
  border: solid black 1px;
  font-size: 44px;
  width: 500px;
  display: inline-block;
}

.controlContainer {
  position: absolute;
  text-align: center;
  width: 100px;
  display: inline-block;
}

.control {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: solid black 1px;
  text-align: center;
  margin-bottom: 20px;
}

.button {
  margin-top: 30px;
}

.hide {
  display: none;
}

.time {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}

.ticker {
  display: inline-block;
  font-size: 30px;
  margin-top: -5px;
}

.minus {
  margin-right: 10px;
}

.plus {
  margin-left: 10px;
}

＆＃13;

＆＃13;

＆＃13;