在網(wǎng)頁設(shè)計中，居中顯示是一種非常常見的需求。在CSS樣式中，要實(shí)現(xiàn)居中顯示，需要對元素的寬、高以及位置進(jìn)行控制。 CSS中的兩種居中方式 1. 水平居中 想要實(shí)現(xiàn)水平居中，首先需要將需要居中的元素設(shè)置為塊級元素。然后，可以通過設(shè)置寬度以及margin來實(shí)現(xiàn)水平居中。具體代碼如下： pre{ display: block;/*將pre元素設(shè)置為塊級元素*/ width: 200px;/*設(shè)置預(yù)設(shè)寬度*/ margin: 0 auto;/*將左右邊距設(shè)置為auto，實(shí)現(xiàn)水平居中*/ } 2. 垂直居中 垂直居中比較復(fù)雜，有多種實(shí)現(xiàn)方式。這里介紹兩種： （1）使用定位 通過絕對定位的方式實(shí)現(xiàn)垂直居中： pre{ position: absolute;/*先將元素設(shè)置為絕對定位*/ top: 50%;/*將元素頂部距離設(shè)置為50%*/ transform: translateY(-50%);/*通過負(fù)數(shù)的 translateY，將元素向上移動50%，從而實(shí)現(xiàn)垂直居中*/ } （2）使用Flex布局 Flex布局是一種強(qiáng)大的布局方式，可以很方便地實(shí)現(xiàn)垂直居中。具體代碼如下： .container{ display: flex; justify-content: center;/*將子元素在主軸上水平居中*/ align-items: center;/*將子元素在交叉軸上垂直居中*/ } pre{ display: block; width: 200px; } 總結(jié) 居中顯示在網(wǎng)頁設(shè)計中是一種很重要的需求，掌握CSS的居中方式對于網(wǎng)頁設(shè)計師來說是必備技能之一。上文介紹了CSS中的兩種居中方式，希望能對廣大網(wǎng)頁設(shè)計師有所幫助。