在網頁設計中，居中顯示是非常常見的需求，其中CSS提供了多種方法實現網頁內容的居中顯示。下面我們來學習如何實現CSS網頁的居中顯示。 一、水平居中 1.行內元素的水平居中 對于行內元素的水平居中，我們可以使用text-align屬性，將其設置為center即可。 例如：

p{
text-align:center;
}

2.塊級元素的水平居中 對于塊級元素的水平居中，我們可以使用margin屬性，將左右外邊距設置為auto，這樣元素就會自動居中顯示。 例如：

div{
margin:0 auto;
}

二、垂直居中 1.單行文本的垂直居中 對于單行文本，我們可以將其line-height屬性和height屬性設置為相等的數值，這樣就可以實現單行文本的垂直居中。 例如：

p{
height:50px;
line-height:50px;
text-align:center;
}

2.多行文本的垂直居中 對于多行文本的垂直居中，我們可以使用flex布局或者position屬性實現。 flex布局：

.container{
display:flex;
align-items:center;
}
p{
margin:auto;
}

position屬性： 首先需要將父元素設置為position:relative，然后將子元素設置為position:absolute，同時將top和left屬性設置為50%，然后再將margin-top和margin-left屬性設置為元素高度和寬度的一半即可。 例如：

.container{
position:relative;
}
p{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
}

以上就是關于CSS網頁如何居中顯示的介紹，希望對大家有所幫助。