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