CSS是前端开发中不可或缺的技能，作为一名前端开发者，正确使用CSS的居中方式是非常重要的，下面我们来介绍一下CSS的四种居中方式：

1. 水平居中

.container{
    text-align: center;
}

.item{
    display: inline-block;
}

使用text-align:center将父元素居中，再将子元素设为inline-block，这样就可以实现水平居中。

2. 垂直居中

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

使用flex布局，将父容器设置为display:flex，并使用justify-content:center表示水平居中，align-items:center表示垂直居中。

3. 水平垂直居中

.container{
    position: relative;
}

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用position:relative将父元素设为相对定位，再将子元素设为绝对定位，使用top:50%和left:50%将子元素定位到父元素中心点，使用translate(-50%,-50%)将子元素向左上方移动自身宽高的一半，达到水平垂直居中的效果。

4. 视口居中

.container{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用position:fixed将元素设为固定定位，使用top:50%和left:50%将元素定位到视口中心点，使用translate(-50%,-50%)将元素向左上方移动自身宽高的一半，达到视口居中的效果。