クロックの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

.timerを中心にh1のheightを削除してください。 heightが固定されているため、h1は200pxより大きいため中央に配置されません。 heightを.timerに減らす場合は、h1のmargin-topとmargin-bottomを減らしてください。

（0から-5pxに例えば）.tickerための中間減少に+と-近いmargin-top値を移動します。デモ：

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>