>[danger]Css中常用的垂直居中解決方案有哪些？ | 方案名稱 | 解釋 | | -------------------- | ------------------------------------------------------------ | | `vertical-align` 屬性 | 用于控制元素內部的行內元素（如文本或圖片）的垂直對齊方式。通常與 `display: table-cell` 結合使用，實現單元格內部的元素垂直居中。 | | `line-height` 屬性 | 用于設置行內元素的行高，可以使單行文本元素垂直居中。但是如果元素高度超過一行，則無法實現垂直居中。 | | `flexbox` 布局 | 使用 `display: flex` 和相關屬性可以實現容器內元素的水平和垂直居中。 | | `grid` 布局 | 使用 `display: grid` 和相關屬性可以實現網格布局中元素的水平和垂直居中。 | | 絕對定位 + 負邊距 | 將需要垂直居中的元素絕對定位到容器中心，然后通過負邊距調整元素位置。 | >[info]技術詳解 1. Flex布局 使用Flex布局可以方便地實現垂直和水平居中。只需要將要居中的元素的容器設置為display: flex，并在容器上設置align-items:center和justify-content:center兩個屬性，即可實現水平和垂直居中。比如： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 絕對定位+負邊距 利用絕對定位和負邊距也可以實現垂直居中。首先，將要居中的元素設置為絕對定位，并使用top、bottom、left、right屬性將其定位于父容器的正中間。然后，將元素的寬高設置為確定的值，再通過設置margin:auto來實現水平居中。比如： ```css .container { position: relative; } .child { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; } ``` 3. 表格布局 使用表格布局也可以輕松實現水平和垂直居中。首先，將要居中的元素放在一個單元格中，然后將該單元格的內容水平和垂直都居中。這樣就可以實現元素的垂直和水平居中。比如： ```css .wrapper { display: table; } .container { display: table-cell; vertical-align: middle; text-align: center; } ``` 4. Line-height等于高度 當元素只有一行文本時，可以使用這種方法實現元素的垂直居中。只需將元素的line-height屬性設置為與其高度相等即可。比如： ```css .container { height: 100px; line-height: 100px; } ```