CSS是一种非常强大的网页排版语言，它能够让我们轻松控制页面上各种元素的样式，而设置内容居中则是我们在实际开发中非常常见的需求之一。下面我们就来探讨一下如何用CSS设置居中不变。

/* 水平居中 */
.box {
width: 200px;
margin: 0 auto;
}
/* 竖直居中 */
.box {
height: 200px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 水平+竖直居中 */
.box {
width: 200px;  /* 这里的宽度和高度都可以根据实际情况来设置 */
height: 200px;
position: absolute;
top: 50%;  /* 先把元素放在父容器的中间位置 */
left: 50%;
margin-top: -100px; /* 这里的值为高度的一半 */
margin-left: -100px;  /* 这里的值为宽度的一半 */
}
/* 元素在手机端适配时也能保持居中 */
@media screen and (max-width: 768px) {
.box {
position: relative;
top: 0;
left: 0;
margin: 0 auto;
}
}

总的来说，通过上述的代码设置，我们可以轻松实现各种不同类型的居中效果，而且无论你的网页在哪种设备上浏览，都能够得到良好的体验。