使Div 在父div 內垂直居中
使div 在其父div 內垂直居中可以透過多種方法實現，無需依賴特定元素尺寸。
表格版面配置（經典方法）
此方法利用表格版面配置和內聯區塊顯示屬性。
<div class="container">
<div class="inner">
...
</div>
</div>.container {
display: table-cell;
vertical-align: middle;
height: 500px;
width: 500px;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
}變換（現代方法）
轉換為垂直領域提供了更簡單的解決方案
.container {
position: relative;
height: 500px;
width: 500px;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}Flexbox（首選現代方法）
Flexbox 提供了最直接的居中對齊方法。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
}
.inner {
width: 200px;
height: 200px;
}注意：
以上是如何使 Div 在其父 Div 中垂直居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
