css侧轴居中 |圆环百分比 css

其中比较常见的是使用flex布局进行居中，这里大家以垂直居中为例，来讲解如何使用CSS的flex布局实现侧轴居中效果：

.container {
display: flex; /* 设定父容器使用flex布局 */
align-items: center; /* 设定侧轴的对齐方式为居中 */
}

在上述代码中，大家给容器设置了flex布局，同时设定了侧轴的对齐方式为居中，这样就可以实现垂直居中效果了。如果需要水平居中的效果，只需要再添加一个justify-content的属性即可：

.container {
display: flex; /* 设定父容器使用flex布局 */
align-items: center; /* 设定侧轴的对齐方式为居中 */
justify-content: center; /* 设定主轴的对齐方式为居中 */
}

在这里大家同时设定了主轴和侧轴的对齐方式均为居中，这样就能够实现完全居中的效果了。

除了使用flex布局之外，还可以使用其他的方法来实现居中效果，例如使用absolute布局或者margin等属性进行设定，但是相对于flex布局而言，这些方法显得过于繁琐，因此大家还是推荐使用flex布局进行居中效果的实现。