在网页设计中,垂直居中是我们经常会遇到的问题。若网页元素无法垂直居中,不仅给页面带来瑕疵,也会影响用户的使用体验和页面优化。因此,掌握CSS垂直居中技巧是非常必要和重要的。
一、宽高已知的元素垂直居中
假如我们有一个宽高都为200px的元素,它位于其父元素的中心位置。那么,我们该如何让这个子元素垂直居中呢?
父元素:position: relative;
子元素:position: absolute;
top: 50%;
margin-top: -100px; /* 子元素高度的一半 */
我们通过给子元素设置一个相对定位,并设置子元素的top值为50%。再加上margin-top值为子元素高度的一半,就可以实现高度宽度已知的元素居中。
二、宽高未知的元素垂直居中
如果子元素宽高未知,又该怎么办?下面我们先来看一个比较基础的例子:
父元素:display: table-cell;
vertical-align: middle;
子元素:display: inline-block;
在本例中,我们对父元素以display: table-cell方式进行属性设置,并在其中添加vertical-align: middle,来实现元素的垂直居中。子元素设置为display: inline-block,可以避免宽度过大导致元素换行。
如果不考虑兼容性问题,我们也可以借助flex布局来实现。可以使用如下代码:
.container {
display: flex;
justify-content: center;
align-items: center;
}
使用display: flex可以将子元素集中于父元素中,justify-content: center可以使它们水平居中,align-items: center可以使它们垂直居中。
三、绝对定位元素垂直居中
常见的情况是,我们需要将绝对定位的元素居中显示。下面介绍两种方法:
第一种方法是,将绝对定位的元素上下左右都为0,使其定位于父元素中心位置。具体代码如下:
父元素:position: relative;
子元素:position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
上述代码会将绝对定位元素左右、上下都挤满到父元素中心的位置。margin: auto会使其在垂直方向上自动居中。
第二种方法是,使用transform属性,将绝对定位的元素自身向上移动50%,并算出它的高度的负数值来使其居中显示。代码如下:
子元素:position: absolute;
top: 50%;
transform: translateY(-50%);
以上是CSS实现垂直居中的几种方法,它们的应用场景和使用方法各有不同。我们可以在实际应用中按照要求进行选择。