5 种水平垂直居中方法，10 个必会的 CSS 居中技巧汇总！

前端

2024-02-23 23:41:32

水平垂直居中：前端开发中的关键技能

作为一名前端开发人员，精通水平和垂直居中技术是至关重要的。在面试中，面试官经常会问到这个问题，而熟练掌握多种 CSS 居中方法会给你留下深刻印象。以下是十种有效的方法：

1. Flex 布局

Flexbox（柔性布局）是一种强大的工具，可以轻松实现水平和垂直居中。使用 justify-content: center; 和 align-items: center; 属性可以轻松对元素进行居中。

2. Grid 布局

Grid 布局是一种新的 CSS 布局模块，提供了类似于 Flexbox 的功能。使用 place-items: center; 属性可以立即实现元素的水平和垂直居中。

3. margin

对于块级元素（如 div），可以使用 margin: 0 auto; 属性实现水平居中。它通过在元素两侧添加相等的边距来实现。

4. transform

transform: translate(-50%, -50%); 属性可以将元素相对于其自身中心点进行平移。这对于绝对定位或固定定位的元素非常有用。

5. table

display: table; 属性可以将元素转换为表格元素。然后，可以使用 text-align: center; 和 vertical-align: middle; 属性对内容进行居中。

6. inline-block

对于内联元素（如 span），可以使用 display: inline-block; 属性将其转换为块级元素。然后，可以使用 vertical-align: middle; 属性对内容进行垂直居中。

7. absolute

对于绝对定位的元素，可以使用 top: 50%; 和 left: 50%; 属性将其置于其父元素的中心点。然后，使用 transform: translate(-50%, -50%); 属性将其相对于其自身中心点进行平移。

8. 相对定位

对于相对定位的元素，可以使用 left: 50%; 和 transform: translate(-50%, 0); 属性将其水平居中。这样可以将其相对其父元素进行定位，同时保持其垂直位置不变。

9. calc() 函数

calc() 函数可以用于动态计算元素的宽度或高度。对于水平居中，可以使用 margin: 0 auto; 和 width: calc(100% - 20px); 属性，其中 20px 是元素两侧所需的边距。

10. vw 和 vh 单位

视口宽度 (vw) 和视口高度 (vh) 单位可以根据视口的大小进行计算。对于绝对定位的元素，可以使用 top: 50vh; 和 left: 50vw; 属性将其置于视口中心点。然后，使用 transform: translate(-50%, -50%); 属性将其相对于其自身中心点进行平移。

常见问题解答