語法
<style>
.boxA{
max-width: 600px;
height: 100px;
border: 1px solid red;
margin: 1em auto;
display: flex;
justify-content: center;
align-items: center;
}
.boxB{
width: 300px;
border: 1px solid gold;
text-align: center;
padding: 10px;
}
</style>
<div class="boxA">
<div class="boxB">
文字
</div>
</div>
範例
文字
說明
需要做兩個 div ，第一個 div 設置 display: flex 以及 align-items: center 來控制裡面的物件位置，第二個 div 才是真正的內容，如果需要文字置中則再加上 text-align: center 即可。