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

Question

我正在研究显示时钟定时器的h1标签不是垂直居中（页面中心）的pomodoro时钟。我怎么能垂直居中文本，而不会失去水平对齐？此外，如果有人可以建议我怎样才能使控件内部的 - （减号）和+（加号）符号更接近中间位置，而不会移动文本。

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; 
 
}

<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>

Answer 1

你的问题是不完全清楚，但尝试将其应用到的元素：

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

Answer 2

h1 { 
    vertical-align: middle; 
} 

这将对准H1你要我相信的样子。

Answer 3

刚删除height为.timer为中心h1。由于固定的height,h1未居中，因为它大于200px。如果你想减少height的.timer只是减少h1的margin-top和margin-bottom。

要移动+并-接近中间下降margin-top值.ticker（例如，从0到-5px）。演示：

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; 
 
}

<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>