一、前言
在前端开发里，垂直居中一直是个让人头疼的问题。以前常用 height 和 line-height 来实现垂直居中，但这俩货有不少局限。今天咱就来聊聊不用它们，怎么实现垂直居中，给大家分享一些终极解决方案。
二、传统方法的局限
2.1 height 和 line-height 的问题
用 height 和 line-height 实现垂直居中，有个大前提，就是内容只能是单行文本。一旦内容变成多行，或者是图片、块级元素啥的，这方法就不管用了。
咱看个例子：
/* CSS 技术栈 */
/* 父元素 */
.parent {
height: 200px;
line-height: 200px;
background-color: #f0f0f0;
}
/* 子元素 */
.child {
color: #333;
}
<div class="parent">
<span class="child">单行文本</span>
</div>
在这个例子里，单行文本能垂直居中。但要是把 span 里的内容换成多行，就会发现它不能正常垂直居中了。
2.2 其他局限
height 和 line-height 还得提前知道元素的高度，要是高度不确定，这方法就没法用。而且，它对不同类型的元素支持也不好，像图片、块级元素，用这方法就很难实现垂直居中。
三、终极解决方案
3.1 Flexbox 布局
Flexbox 是个很强大的布局模型，用它实现垂直居中超简单。
/* CSS 技术栈 */
/* 父元素 */
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 200px;
background-color: #f0f0f0;
}
/* 子元素 */
.child {
color: #333;
}
<div class="parent">
<div class="child">不管是单行还是多行文本，都能垂直居中</div>
</div>
在这个例子里，给父元素设置 display: flex，然后用 justify-content: center 实现水平居中，align-items: center 实现垂直居中。这样，不管子元素是单行还是多行文本，或者是图片、块级元素，都能轻松实现垂直居中。
应用场景
Flexbox 布局适用于各种需要垂直居中的场景，尤其是在响应式设计里，它能很好地适应不同屏幕尺寸。
技术优缺点
优点：代码简单，兼容性好，能适应不同类型的元素。 缺点：对旧版本浏览器支持不好，像 IE9 及以下就不支持。
注意事项
在使用 Flexbox 布局时，要注意父元素和子元素的关系，以及 flex 属性的使用。
3.2 Grid 布局
Grid 布局也是个很强大的布局模型，它能实现更复杂的布局，垂直居中也不在话下。
/* CSS 技术栈 */
/* 父元素 */
.parent {
display: grid;
place-items: center; /* 水平和垂直都居中 */
height: 200px;
background-color: #f0f0f0;
}
/* 子元素 */
.child {
color: #333;
}
<div class="parent">
<div class="child">用 Grid 布局也能轻松实现垂直居中</div>
</div>
在这个例子里，给父元素设置 display: grid，然后用 place-items: center 实现水平和垂直都居中。
应用场景
Grid 布局适用于需要复杂布局的场景，比如多列多行的布局。
技术优缺点
优点：功能强大，能实现复杂的布局，垂直居中很方便。 缺点：对旧版本浏览器支持不好，学习成本相对较高。
注意事项
在使用 Grid 布局时，要了解 grid-template-columns、grid-template-rows 等属性的使用。
3.3 绝对定位和负边距
这种方法是利用绝对定位和负边距来实现垂直居中。
/* CSS 技术栈 */
/* 父元素 */
.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}
/* 子元素 */
.child {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 50px;
margin-top: -25px; /* 负边距，高度的一半 */
margin-left: -50px; /* 负边距，宽度的一半 */
color: #333;
}
<div class="parent">
<div class="child">用绝对定位和负边距实现垂直居中</div>
</div>
在这个例子里，先把父元素设置为 position: relative，子元素设置为 position: absolute，然后用 top: 50% 和 left: 50% 把元素移动到父元素的中心，再用负边距把元素向上和向左移动自身宽度和高度的一半。
应用场景
这种方法适用于元素尺寸固定的场景。
技术优缺点
优点：兼容性好，对旧版本浏览器也支持。 缺点：需要提前知道元素的宽度和高度，不适合尺寸不确定的元素。
注意事项
在使用这种方法时，要确保元素的宽度和高度是固定的，否则负边距就没法准确计算。
3.4 绝对定位和 transform
这种方法也是利用绝对定位，但用 transform 来实现垂直居中。
/* CSS 技术栈 */
/* 父元素 */
.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}
/* 子元素 */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 水平和垂直都移动 -50% */
color: #333;
}
<div class="parent">
<div class="child">用绝对定位和 transform 实现垂直居中</div>
</div>
在这个例子里，先把父元素设置为 position: relative，子元素设置为 position: absolute，然后用 top: 50% 和 left: 50% 把元素移动到父元素的中心，再用 transform: translate(-50%, -50%) 把元素向上和向左移动自身宽度和高度的 50%。
应用场景
这种方法适用于元素尺寸不确定的场景。
技术优缺点
优点：不需要提前知道元素的宽度和高度，兼容性也不错。 缺点：对旧版本浏览器支持不好，可能会有一些性能问题。
注意事项
在使用这种方法时，要注意 transform 属性的兼容性，以及可能带来的性能问题。
四、不同解决方案的比较
4.1 兼容性比较
Flexbox 和 Grid 布局对旧版本浏览器支持不好，绝对定位和负边距、绝对定位和 transform 兼容性相对较好。
4.2 适用场景比较
Flexbox 和 Grid 布局适用于各种场景，尤其是复杂布局和响应式设计；绝对定位和负边距适用于元素尺寸固定的场景；绝对定位和 transform 适用于元素尺寸不确定的场景。
4.3 代码复杂度比较
Flexbox 和 Grid 布局代码相对简单，绝对定位和负边距、绝对定位和 transform 代码相对复杂一些。
五、注意事项
5.1 浏览器兼容性
在选择解决方案时，要考虑浏览器的兼容性。如果需要支持旧版本浏览器，就不能用 Flexbox 和 Grid 布局。
5.2 性能问题
像 transform 这样的属性可能会有一些性能问题，尤其是在动画效果里，要注意优化。
5.3 元素尺寸
不同的解决方案对元素尺寸的要求不同，要根据实际情况选择合适的方案。
六、文章总结
在前端开发中，垂直居中是个常见的需求。传统的 height 和 line-height 方法有很多局限，我们可以用 Flexbox 布局、Grid 布局、绝对定位和负边距、绝对定位和 transform 等方法来实现垂直居中。这些方法各有优缺点，适用场景也不同。在实际开发中，要根据具体需求和浏览器兼容性来选择合适的解决方案。同时，还要注意性能问题和元素尺寸的影响。希望大家通过这篇文章，能掌握垂直居中的终极解决方案，告别 height 和 line-height 的局限。
评论