在網頁設計中，居中對齊是一個常見的需求，其中上下居中對齊更是讓人頭疼。在CSS中，我們有很多方法可以實現它，下面我們來了解一下。 一、使用position和transform屬性 ```css .container { position: relative; } .content { position: absolute; top: 50%; transform: translateY(-50%); } ``` 解釋：將父元素設置為相對定位，子元素設置絕對定位，top屬性設為50%讓其處于中間位置，使用transform的translateY函數將子元素往上移動子元素本身高度的一半，從而達到上下居中對齊的效果。 二、使用display:flex ```css .container { display: flex; align-items: center;/* 縱向居中對齊 */ justify-content: center;/* 橫向居中對齊 */ } ``` 解釋：將父元素設置為flex布局，使用align-items屬性縱向居中對齊，使用justify-content屬性橫向居中對齊。 三、使用display:table-cell ```css .container { display: table-cell; vertical-align: middle; } .content { display: inline-block;/* 需要將子元素設置成內聯塊級元素 */ } ``` 解釋：使用display:table-cell將父元素設置為表格單元格，使用 vertical-align屬性設置單元格內文本垂直居中對齊，然后將子元素設置為inline-block，讓它能夠在表格單元格內以塊狀元素的方式呈現。 四、使用line-height屬性 ```css .container { height: 400px; line-height: 400px;/* 需要將行高設置為父元素高度 */ text-align: center;/* 橫向居中對齊 */ } ``` 解釋：將父元素設置一個固定高度，并使用line-height屬性將其行高設置為與父元素高度相同，讓里面的文本垂直居中。因為文字內容是自適應的，所以這個方法只適用于單行文本的居中對齊。 以上就是幾種常見的上下居中對齊的方法，可以根據自身需求選擇相應的方式進行實現。