css实战技巧
2021-02-06 06:16
标签：position dir sla class width 垂直 auto 布局 垂直居中 flex布局 最火热的布局 css实战技巧 标签：position dir sla class width 垂直 auto 布局 垂直居中 原文地址：https://www.cnblogs.com/cc123nice/p/13117982.html主要实战技巧
1、自动撑满剩下
flex：auto 撑满.父{
display:flex;
width:2000px
}
.子1{
flex:auto
}
.子2{
width:200px
}
2、垂直居中
(1)古董方法
.子1{
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%,-50%);
}
或
.子2{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
(2)简单方法vertical-align
vertical-align: middle 行内元素居中.父{
line-height:50px
}
.子{
display:inline/inline-block;
vertical-align: middle
}
(3)flex布局 （推荐）
.父{
display: flex;
flex-direction: column;
justify-content: space-around; /*垂直居中*/
}
.子{
margin:0 auto /*水平居中*/
}