在網站設計中，想要讓頁面看起來更加美觀，CSS樣式的運用是必不可少的。其中，讓頁面中的元素高度居中是我們經常需要實現的一項任務。
在設計中，我們常用的元素有段落、圖片、代碼等等。本文將主要介紹我們如何使用CSS把這些元素高度居中。
首先，我們來看一下如何讓段落中的內容高度居中。我們可以使用p標簽來定義我們的段落，在CSS中使用以下代碼即可實現段落中的文本垂直居中：
p {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 200px;
}
其中，display屬性設置為flex，這個屬性使得我們的段落視為一行中的元素，而不是單獨的文本塊。justify-content和align-items屬性定義了垂直和水平方向上的對齊方式，text-align屬性控制文本水平居中。
接下來我們來看一下圖片相對于父元素的高度居中。
img {
display: block;
margin: 0 auto;
}
在這個例子中，display屬性被設置為block，這個屬性使得我們的圖片視為一個獨立的文本塊，margin屬性用于調整圖片在頁面中的位置，即讓圖片左右居中。
最后，我們還可以使用pre標簽來編寫代碼，同樣的，我們可以使用CSS將代碼高度居中。
pre {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
在這個例子中，我們使用pre標簽來定義代碼塊的文本，其中display、justify-content和align-items屬性的作用與我們之前提到的類似。
以上就是如何使用CSS讓段落、圖片和代碼高度居中的方法，這樣我們就可以更好地設計我們的網站和頁面了。