CSS屬性：上下居中 在網頁設計中，上下居中是一項非常常見的樣式需求，例如在一個文字框中居中顯示文本內容，或者在一個圖片框中讓圖片垂直居中顯示。下面介紹幾種實現上下居中的CSS屬性。 1.使用 flexbox 屬性 Flexbox屬性是在CSS3中新增的一種布局方式，通過在父容器中設定 display:flex 屬性，子元素可以輕松地實現居中對齊。 ```css .container{ display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ } ``` 2.使用 display: table 屬性 另一種方法是使用表格布局，在父容器中設定 display:table 屬性，子元素設定 display: table-cell 和 vertical-align: middle 屬性即可實現垂直居中。 ```css .container{ display: table; } .child{ display: table-cell; vertical-align: middle; } ``` 3.使用 transform 屬性 可以通過絕對定位來實現更精細的居中效果，通過設定 top 和 left 屬性讓子元素居中，同時使用 transform:translate(-50%,-50%) 屬性將元素自身左上角移動到正中央。 ```css .container{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); } ``` 總結 通過以上幾種方法，我們可以輕松地實現網頁設計中的上下居中樣式需求，達到更好的視覺效果和用戶體驗。無論是在響應式設計還是桌面端設計中，居中對齊都是不可或缺的一項技能。