在前端开发中，我们常常需要让某个元素在页面上垂直居中。这可能是因为 UI 设计师给出的设计要求，也有可能是我们自己为了更好的展示页面而需要垂直居中元素。今天我们将从不同角度来看如何让元素垂直居中。
一、使用 flexbox 布局
在 CSS3 中，引入了 Flexbox 布局（flexible box），可以使用 flex 属性来非常简单地让元素垂直居中。
首先，我们需要在元素的父容器上应用以下 CSS 样式：
.parent {
display: flex;
align-items: center;
justify-content: center;
}
其中 display: flex; 属性将父容器设为 flex 布局，align-items: center; 属性将子项垂直居中，justify-content: center; 属性将子项水平居中。这两种方式就可以实现元素在父容器中的垂直居中。
代码演示：
<div class="parent">
<div class="child">这是要垂直居中的元素</div>
</div>
<style>
.parent {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.child {
height: 50px;
width: 200px;
background-color: #F2B632;
}
</style>
二、使用绝对位置和负边距
另外一种方式是使用绝对定位和负边距实现元素的垂直居中。这种方法适用于你知道元素高度的情况。
首先，我们需要在元素的父容器上应用以下 CSS 样式：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
其中，position: relative; 用来定义父容器的定位方式，position: absolute; 用来把子元素进行绝对定位，top: 50%; 则将子元素定位在父容器的中心线上，transform: translateY(-50%); 用来将子元素整体上移 50% 的高度，从而实现垂直居中。
代码演示：
<div class="parent">
<div class="child">这是要垂直居中的元素</div>
</div>
<style>
.parent {
height: 200px;
position: relative;
background-color: #F2B632;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 200px;
}
</style>
三、使用 table-cell
我们还可以使用 table 标签来实现元素的垂直居中。这种方法比较老旧，但是在一些特殊情况下仍然适用。
首先，我们需要在元素的父容器上应用以下 CSS 样式：
.parent {
display: table;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
}
其中，display: table; 将父容器设为表，height: 100%; 用来将表的高度撑满，display: table-cell; 使子元素表现为表格单元格，vertical-align: middle; 属性将子元素垂直居中。
代码演示：
<div class="parent">
<div class="child">这是要垂直居中的元素</div>
</div>
<style>
.parent {
height: 200px;
display: table;
background-color: #F2B632;
}
.child {
height: 50px;
width: 200px;
display: table-cell;
vertical-align: middle;
}
</style>
四、结语
无论使用哪种方法，让元素垂直居中都是一个常见的需求。以上介绍的几种方法都非常简单易懂，并且可以应用于不同的场景。在实际项目中，我们需要根据具体的情况选择最适合的方案。
最后，总结一下以上方法的优点和缺点：
Flexbox 布局：
优点：非常简单直观，代码短小精悍。
缺点：兼容性不够好，IE 只支持 IE11 及以上版本。
绝对定位和负边距：
优点：适用性很广，可以适应各种情况。
缺点：需要知道元素高度，并且在元素数量较多时可能会出现问题。
Table-Cell：
优点：适用性强，兼容性好。
缺点：需要用到表格布局，语义方面可能不太合适。
总的来说，使用 Flexbox 布局是一种比较好的选择，因为它的适用性和效果都较好，而且代码简洁易懂。当遇到一些特殊情况时，我们可以考虑使用其他的方法来实现元素的垂直居中。
原创文章，作者：WYUK，如若转载，请注明出处：https://www.506064.com/n/149952.html
微信扫一扫 
支付宝扫一扫 