CSS布局垂直居中(已知高度和未知高度)

已知高度使用用传统的绝对定位-margin高度的一半方法,这里不多介绍。
未知高度常用的三种方法:
1.表格 cell-table方法

.parent1{
display: table;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
}

2. 决定定位 transform:translate(-50%;-50%)

.parent2{
position: relative;
}
.parent2 .child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3.弹性布局 flex

.parent3{
display: flex;
justify-content: center;
align-items: center;
}

 

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

电子邮件地址不会被公开。 必填项已用*标注

浏览量:12 次浏览