一般很少需要用到垂直對齊，都是資料由上而下寫下來

一般資料垂直對齊，建議使用 line-height 行高的設定，就會垂直置中了

例如：

<style type="text/css">
#box1{
    border: 1px solid gray;
    height: 300px;
    text-align: center;
    line-height: 300px;
    font-size: 3rem;
}
</style>
<div id="box1">
    今天天氣不錯！
</div>

效果展示：

使用新式的 display: flex; 設定

align-items: center; 內容垂直對齊

justify-content: center; 內容水平對齊

例如：

<style type="text/css">
#box1{
    border: 1px solid gray;
    height: 300px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#box2{
    border: 3px solid lime;
    background-color: yellow;
    height: 100px;
    width: 300px;
    text-align: center;
}
</style>
<div id="box1">
    <div id="box2">今天天氣不錯！</div>
</div>

效果展示：