Css 实现水平垂直居中的方法
前言:
其实在前端类别中,已经将实现水平垂直居中的方法列举了出来,这里仍将这几种方法提出来的理由是:“认为这个知识点比较重要,也是本人较为健忘”。
实现:
方案一:
关键词:绝对定位
,margin:auto
.box{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto; //自适应
}
方案二:
关键词:绝对定位
,负像素
.box{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-top:-100px;//高度的一半
margin-left:-100px;//宽度的一半
}
方案三
关键词:CSS3
,transform
,绝对定位
这是方案二的一个变形写法
.box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
方案四
关键词:弹性布局
,center
.box{
display:flex;//设置为弹性布局
justify-content:center; //水平居中
align-items:center; //垂直居中
}