CSS如何設置居中？

居中可以分為水平居中和垂直居中，下面一一介紹。

1. 水平居中

水平居中可以通過設置margin屬性實現。實現的原理是：利用自動居中（margin：auto）的屬性，在父元素中設置左右margin值為auto，然后子元素就會自動居中。

例子：
.parent {
width: 200px;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
margin: 0 auto;
}

2. 垂直居中

垂直居中可以通過設置父元素的display為flex，并在父元素上設置align-items和justify-content屬性為center實現。flex布局是一種強大的布局方式，通過設置其屬性可以輕松實現任何方向上的居中。

例子：
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
}

通過上述兩種方法可以實現元素的水平和垂直居中。其它的居中方式也可以通過多種方法實現，需要根據具體場景選擇。