淘先锋技术网

首页 1 2 3 4 5 6 7

在网页设计中,垂直居中一直是一个令人困扰的问题,特别是在CSS中。

如何让一个元素纵向垂直居中呢?经过多年的发展,有了多种方法。

/* 第一种方法,使用display:flex */
.parent{
display:flex;
align-items:center;
}
/* 第二种方法,使用absolute+transform */
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
/* 第三种方法,使用line-height */
.parent{
line-height:200px;
}
.child{
vertical-align:middle;
}

以上几种方法都可以达到垂直居中的效果,使用哪种方式取决于具体情况和个人习惯。