如何在div內垂直居中子元素？

在

內垂直居中元素元素

在網頁中對齊元素時，了解相對於其視窗對齊元素或相對於其父容器對齊元素之間的差異至關重要。使用左時：50%；將元素置於整個視窗的中心，將元素與其直接父元素

對齊。需要不同的方法。

要在

內實現垂直居中，請按照以下步驟操作：

1. 新增 text-align:center;到父級
   。這樣可以確保其所有子元素水平居中。
2. 要讓子元素垂直居中，請應用 margin:auto;。這會指示瀏覽器自動調整元素的頂部和底部邊距，以均勻分配剩餘空間。

示範這一點的範例 HTML 和 CSS 程式碼：

<div>
<pre class="brush:php;toolbar:false">#parent {
  text-align: center;
}

#child {
  margin: auto;
}

在此範例中，子元素在父元素

內水平和垂直居中。