前言

在前端面试中，“如何实现一个元素水平垂直居中”一直是各大面试官青睐的题目，这篇文章将讲解 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后端面试题库大全