在网页设计中，居中对齐是一个重要的设计原则。而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布局来实现居中对齐。