CSS是网页制作中不可或缺的一部分，而常见的问题之一就是如何居中一个元素或一个容器。本文将介绍几种常用的CSS居中方式。

示例代码：

.container {
width: 200px;
height: 200px;
border: 1px solid #ccc;
text-align: center; /*居中方式一*/
display: flex; /*居中方式二*/
justify-content: center;
align-items: center;
}
.container p {
font-size: 20px;
}

居中方式一：使用text-align属性

如果想要居中一个内联元素，可以使用text-align属性。将该元素的父级容器设置为text-align: center即可。

.container {
text-align: center;
}

此时，该容器内的所有内联元素都会居中。

居中方式二：使用flex布局

使用flex布局是一个更加强大的居中方式，特别是在居中一个块级元素或一个容器时。只需将该容器的display属性设置为flex，再将justify-content和align-items属性都设置为center即可。

.container {
display: flex;
justify-content: center;
align-items: center;
}

这种方式可以同时垂直和水平居中。

居中方式三：使用margin属性

利用margin属性也可以实现居中效果。将该元素的margin-left和margin-right都设置为auto即可。

.container {
width: 200px;
margin: 0 auto;
}

这种方式适用于那些具有确定宽度且居中的元素，如图片、输入框等。

本文介绍了三种常见的CSS居中方式，它们分别是使用text-align属性、flex布局和margin属性。根据不同的情况和需求，选择合适的方式进行居中操作即可。