css垂直水平居中常用方法
方法一：已知子元素具体宽高+position
父元素：position:relative;
子元素：position:absolute;top:50%;left:50%;margin-top:-子元素高度一半;margin-left:-子元素宽度一半;
.first{
width:300px;
height:200px;
position:relative;
}
.item1{
width:200px;
height:80px;
position:absolute;
top:50%;
left:50%;
margin-top:-40px;
margin-left:-100px;
}
方法二：未知子元素具体宽高+position+translate
父元素：position:relative;
子元素：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
.second{
width:300px;
height:200px;
position:relative;
}
.item-2{
width:60%;
height:40%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法三：弹性布局
父元素添加以下内容：
display:flex; //弹性布局
align-items: center; //水平居中
justify-content:center; //垂直居中
.third{
width:300px;
height:200px;
display:flex;
justify-content:center;
align-items: center;
}
欢迎扫描二维码关注公众号，一起学习一起进步
