CSS樣式設置垂直居中是網頁布局中常見的需求。下面介紹常用的三種方法。

方法一：使用line-height屬性
.container {
height: 100px;
line-height: 100px;
text-align: center;
}
.container p {
display: inline-block;
vertical-align: middle;
}

這種方法適用于元素高度和行高相同的情況。通過設置行高和元素的垂直對齊方式實現居中效果。

方法二：使用flex布局
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}

這種方法適用于IE10及以上瀏覽器。使用flex布局使得子元素居中，justify-content屬性控制水平方向居中，align-items屬性控制垂直方向居中。

方法三：使用絕對定位和負邊距
.container {
position: relative;
height: 100px;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}

這種方法兼容性好，適用于不同高度的元素。使用絕對定位將元素移動到父容器的中心，transform屬性調整元素位置，負邊距抵消元素的寬高。