css 水平垂直居中的几种方法
2018-03-06 本文已影响0人
小鹿_xiaolu
一、已知宽度和高度
第一种方法：
.parent{
width: 200px;
height: 200px;
background: green;
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
第二种方法
.parent{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}
二、未知宽高时
第一种方法：
.parent{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);/* 使用css3的transform来实现 */
}
第二种方法:
.parent{
display:flex;
justify-content:center;
align-items:center;/* 注意这里需要设置高度来查看垂直居中效果
*/background:#AAA;height:300px;
}
