CSS全屏居中是網頁設計中常用的布局技巧，可以讓頁面的元素在瀏覽器中居中顯示，美化頁面的同時提高用戶體驗。本文將介紹如何實現CSS全屏居中，并且讓高度動態變化。

/* 第一步：設置body和html的高度和寬度為100% */
html, body {
height: 100%;
width: 100%;
}
/* 第二步：垂直居中 */
.container {
display: flex; /* 使用flex布局 */
justify-content: center; /* 在水平方向居中 */
align-items: center; /* 在垂直方向居中 */
}
/* 第三步：動態高度 */
.content {
height: auto;
max-height: 100%; /* 最大高度為100%，超出則溢出 */
margin: auto; /* 水平方向居中 */
}

首先，我們需要設置 body 和 html 元素的高度和寬度為100%，這樣才能讓頁面占滿整個瀏覽器窗口。接著，我們需要使用 flex 布局實現垂直居中，通過設置 justify-content 和 align-items 屬性，分別讓元素在水平和垂直方向上居中。

最后，我們需要讓高度動態變化。我們可以將高度設置為自適應，并且使用 max-height 屬性限制最大高度為100%。這樣，當內容高度超過屏幕高度時，內容區域會自動出現滾動條，以便用戶查看所有內容。