在網頁設計中，居中對齊是一個重要的設計原則。而CSS樣式可以幫助實現內容的水平和垂直居中。
水平居中：
為了水平居中，可以使用text-align屬性。將父元素設置為一個特定的寬度，然后將文本的text-align屬性設置為“center”。這將使文本在父元素的中心位置水平居中對齊，如下所示：

p {
width: 300px;
text-align: center;
}

垂直居中：
要在CSS中添加垂直居中，需要使用display：table-cell屬性。為了使用該屬性，必須將元素的display屬性設置為“table”，而不是“block”。然后將父元素的垂直對齊屬性設置為“middle”，將子元素的垂直對齊屬性設置為“inherit”，如下所示：

.parent{
display: table;
height: 300px;
width: 300px;
border: 1px solid black;
vertical-align: middle;
}
.child {
display: table-cell;
vertical-align: inherit;
text-align: center;
}

上面的代碼將子元素在父元素中央垂直居中。
同時水平和垂直居中：
要同時水平和垂直居中，可以將文本包裹在一個塊元素中，并將該元素的屬性設置為具有等于屏幕高度和寬度的高度和寬度，并在縱向和橫向上包裹其他塊元素，如下所示：

.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}

上面的代碼將子元素在中心點水平和垂直居中。
總結：
在網頁設計中，水平和垂直居中是重要的設計原則。CSS樣式可以幫助簡單地實現居中對齊。在設計網頁時，考慮使用text-align屬性、display:table-cell屬性或者flexbox布局來實現居中對齊。