在网页设计中，经常需要将页面元素居中，以提升页面的美观性和用户体验。今天，我来介绍一下如何设置居中的CSS样式。
首先，我们要知道居中有几种方式：水平居中、垂直居中、以及水平垂直居中。接下来分别介绍它们的CSS样式设置方法。
一、水平居中
要让一个元素水平居中，有两种方法：
1.使用 display 属性
将需要居中的元素设为块级元素（block），然后左右外边距都设置为 auto，如下：
pre{
display: block;
margin-left: auto;
margin-right: auto;
}
2.使用 text-align 属性
将需要居中的元素的父元素设置为文本居中（text-align），如下：
p{
text-align: center;
}
二、垂直居中
要让一个元素垂直居中，同样有两种方法：
1.使用 display 和 line-height 属性
将需要居中的元素设为行内元素（inline-block），并将行高（line-height）设置为等于元素高度（height）,如下：
pre{
display: inline-block;
height: 200px;
line-height: 200px;
}
2.使用 flexbox 布局
将需要垂直居中的元素的父元素设置为 Flex 容器（display: flex），并使用 align-items 属性设置其在交叉轴上的对齐方式（center）,如下：
.container{
display: flex;
align-items: center;
}
三、水平垂直居中
要让一个元素水平垂直居中，可以使用以下 CSS 样式：
.pre{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
以上代码使用了定位（position）、上、左边距（top、left）、负 margin（margin-top、margin-left）等多种属性，将元素水平垂直居中。
以上就是三种常见的居中CSS样式的设置方法，我们可以根据实际情况选择使用。如果您还有其他的关于居中的妙招，欢迎和我们分享！