CSS是Web設計中不可少的一部分，它可以讓我們輕松地控制頁面的布局和樣式。然而，有時候我們會在實現某些效果時遇到一些困難，比如垂直居中對齊問題。

在CSS中，水平居中對齊很容易實現，我們只需要使用margin: 0 auto;即可，而垂直居中對齊則要麻煩許多。

目前，我們常用的垂直居中對齊方法有三種：

1.使用絕對定位
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}

2.使用Flexbox布局
.parent{
display: flex;
justify-content: center;
align-items: center;
}

3.使用表格布局
.parent{
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}

上述方法都能實現垂直居中對齊，但有時候，由于某些原因，比如父元素高度不固定，子元素高度也不固定，這些方法可能會失效。此時，我們可以嘗試使用CSS Grid布局。

舉個例子，如果我們想實現一個垂直居中的div，代碼如下：

.parent{
display: grid;
height: 100vh;
}
.child{
justify-self: center;
align-self: center;
}

這里我們使用display: grid;給父元素添加了一個網格布局，將