CSS中如何設置居中？ 居中是Web開發中最常見的任務之一。無論是水平居中還是垂直居中，CSS都提供了多種不同的方法來實現這一目標。 1. 水平居中 在CSS中，有幾種不同的方法可以使元素水平居中。以下是最常見的方法之一： ``` div { width: 200px; margin: 0 auto; } ``` 這個規則意味著，元素的寬度被設置為200像素，并且其左右邊距被自動設置為相等的值。這樣，元素就會被水平居中。 另一種方法是使用display屬性和text-align屬性： ``` div { width: 200px; display: table-cell; text-align: center; vertical-align: middle; } ``` 這個規則使元素的display屬性被設置為table-cell，text-align屬性被設置為center，使元素水平居中。vertical-align: middle屬性則使元素在垂直方向上居中。 2. 垂直居中 在CSS中，垂直居中也有多種方法。以下是其中之一： ``` div { height: 200px; display: flex; justify-content: center; align-items: center; } ``` 這個規則使用CSS的flexbox布局，將元素的display屬性設置為flex，并將justify-content和align-items屬性設置為center，從而使元素在垂直和水平方向上都居中。 另一個方法是使用相對定位和負margin值： ``` div { position: relative; height: 200px; top: 50%; margin-top: -100px; } ``` 這個規則使用了元素的position屬性和top屬性，將元素向上移動50%的高度，然后使用負的margin-top值將元素向下調整50%的高度，使元素在垂直方向上居中。 以上就是CSS中如何設置居中的幾種方法，可以根據需要選擇適合自己的方法來實現居中。