前端工程师们，是不是总在加班改样式、调布局？看着别人轻松通过大厂面试，自己却在面试官的 CSS 问题前栽跟头，心里焦虑又无奈？别慌！从今天起，跟着我每日一道 CSS 样式类高频面试题，把这些知识点吃透，下次面试稳拿高薪！

最近，“CSS 布局优化”“响应式设计技巧” 等词在前端圈热度居高不下，这些可都是面试的常客。今天咱们就先从一道超经典的面试题入手 ——如何用 CSS 实现一个水平垂直居中的 div？ 这题看似简单，背后却藏着好几种巧妙解法，面试官就爱拿它考察你的 CSS 功底。

方法一：使用 Flex 布局

Flex 布局现在可是前端开发的 “香饽饽”，简单又高效，用它来实现水平垂直居中，简直是 “小菜一碟”。

/* 设置父元素为Flex容器 */
.parent {
display: flex;
/* 使子元素在主轴（水平方向）上居中 */
justify-content: center;
/* 使子元素在交叉轴（垂直方向）上居中 */
align-items: center;
/* 给父元素设置宽高，方便观察效果，实际开发中可根据需求调整 */
width: 300px;
height: 300px;
background-color: lightgray;
}
/* 子元素div，设置宽高和背景色 */
.child {
width: 100px;
height: 100px;
background-color: skyblue;
}

只要给父元素设置display: flex，再搭配justify-content和align-items属性，子元素就能稳稳地在父元素里水平垂直居中啦！

方法二：利用绝对定位和 margin:auto

绝对定位也是 CSS 里的 “老伙计”，用它和margin:auto配合，同样能实现居中效果。

/* 设置父元素为相对定位，作为子元素绝对定位的参考 */
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
/* 子元素div，设置绝对定位 */
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 设置margin为auto，让浏览器自动计算边距，实现居中 */
margin: auto;
width: 100px;
height: 100px;
background-color: skyblue;
}

这种方法通过给子元素设置四个方向的定位属性，再让margin自动计算，不管父元素尺寸怎么变，子元素都能牢牢 “钉” 在正中间。

方法三：使用 transform 属性

transform属性就像 CSS 里的 “魔法棒”，用它来实现居中，思路非常巧妙。

/* 设置父元素为相对定位 */
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: lightgray;
}
/* 子元素div，设置绝对定位 */
.child {
position: absolute;
top: 50%;
left: 50%;
/* 使用transform属性，将子元素向上和向左平移自身尺寸的一半，实现居中 */
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
}

先把元素定位到父元素的正中间（50% 处），再通过transform的translate方法，把元素往回 “拽” 自身尺寸的一半，瞬间就实现了精准居中。

面试官问到这到或者跟这道题类似题时，咱们可以这么说：“实现水平垂直居中，我知道有几种常用方法。最简单的是用 Flex 布局，给父元素设置display: flex，再用justify-content和align-items就能轻松搞定；如果想用传统方法，绝对定位搭配margin:auto也可以，通过设置子元素四个方向的定位属性，让margin自动计算边距；还有一种是利用transform属性，先把元素定位到父元素中心，再通过translate平移自身尺寸的一半来实现居中。每种方法都有各自的适用场景，Flex 布局兼容性好，适合现代项目；绝对定位和margin:auto在一些老项目里也经常用；transform则在一些需要动画效果的场景里更合适。”

最后，在实际项目中，你觉得 Flex 布局和 Grid 布局，哪个在实现复杂页面布局时更胜一筹？快来评论区分享你的看法，一起讨论！如果你还想知道更多 CSS 面试题，点个关注，咱们明天继续解锁新的知识点！