面试官：用 CSS 实现一个元素的水平垂直居中，写出你能想到的所有答案

前言

在前端面试中，“如何实现一个元素水平垂直居中”一直是各大面试官青睐的题目，这篇文章将讲解 5 种实现水平垂直居中的方法，帮你轻松过这关。

5 种实现元素水平垂直居中的方法

1.使用 flexbox 布局

该方案的思路是将父元素设置为display: flex;，并使用align-items: center; justify-content: center;将子元素在水平和垂直方向上居中。

代码如下

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 200px;
  height: 200px;
}

复制代码

2.使用 grid 布局

该方案的思路是将父元素设置为display: grid;，并使用place-items: center;将子元素在水平和垂直方向上居中。

代码如下

.parent {
  display: grid;
  place-items: center;
}

.child {
  width: 200px;
  height: 200px;
}

复制代码

3.使用绝对定位和负边距

该方案的思路是将元素向上和向左移动一半的宽度和高度，使其在父元素的中心。由于绝对定位是相对于最近的已定位祖先元素，因此必须确保父元素或祖先元素具有position: relative;或position: absolute;属性。元素必须具有已知的宽度和高度。

代码如下（CodePen 示例）：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}
复制代码

4.使用 transform 属性

该方案的思路是将元素向上和向左移动一半的宽度和高度，使其在父元素的中心。由于transform: translate(-50%, -50%);是相对于元素自身的宽度和高度进行的，因此不需要知道元素的宽度和高度。元素必须设置为绝对定位。

代码如下

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
复制代码

5.使用table布局

该方案的思路是将父元素设置为display: table;，将子元素设置为display: table-cell; vertical-align: middle;，并使用text-align: center;将子元素在水平方向上居中。

代码如下

.parent {
  display: table;
  text-align: center;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全