CSS（层叠样式表）是一种用于定义网页样式的标记语言，可以控制页面元素的外观和布局。本文将详细讨论如何使用CSS在固定宽高的div内实现垂直居中。
1. CSS垂直居中的常见问题
在进行CSS垂直居中时，经常会遇到如下问题：
1.1 内容高度未知的情况下如何垂直居中
当内容高度未知时，我们通常将div的display属性设置为table，然后在其子元素上使用display: table-cell和vertical-align: middle来实现垂直居中。
.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
1.2 内容高度已知的情况下如何垂直居中
当内容高度已知时，我们可以使用绝对定位将内容居中。首先，将div的position属性设置为relative，然后将内容的position属性设置为absolute，并同时指定top和bottom的值为0，并将margin属性设置为auto。
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
2. 固定宽高的div内实现垂直居中
2.1 方案一：使用flexbox布局
flexbox布局是CSS3中引入的一种弹性盒子布局，可以轻松实现元素的垂直居中。我们可以将div的display属性设置为flex，并使用align-items和justify-content属性来实现垂直和水平居中。
.container {
display: flex;
align-items: center;
justify-content: center;
}
2.2 方案二：使用transform属性
我们可以使用CSS的transform属性结合绝对定位来实现div的垂直居中。首先，将div的position属性设置为relative，然后使用transform属性的translateY函数，将内容向上移动50%的高度，并使用负值将其居中。
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3. 示例代码
下面是一个完整的示例代码，演示了如何使用CSS在固定宽高的div内实现垂直居中。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
这是一个垂直居中的div
</div>
</body>
</html>
总结：
在本文中，我们详细讨论了如何使用CSS在固定宽高的div内实现垂直居中。我们介绍了两种常见的方法：使用flexbox布局和使用transform属性。使用这些方法，我们可以轻松地实现元素的垂直居中，不论内容的高度是否已知。记住，选择合适的方法取决于具体的需求和浏览器兼容性。希望本文能对你理解和使用CSS垂直居中有所帮助。