第一种: 伸缩盒子,要定义在父类
display: flex;
justify-content: center; //水平居中
align-items: center;//垂直居中
注意:不能加margin,否则无效,padding(是否能加?)
第二种:不知道盒子长宽:(比较好)
垂直水平居中:top、right、bottom、left全为0, margin: auto;
给父盒子相对定位,position: relative;
给子盒子绝对定位,position: absolute;
第三种:知道盒子长宽
父元素相对定位
子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的子盒子宽度一半。
margin-top: 负的子盒子高度一半;
第四种:使用css3 translate属性,使用的是偏移量
给父盒子相对定位,position: relative;
给子盒子绝对定位,position: absolute;
子盒子:
left: 50%; top: 50%; transform: translate(-50%,-50%);
第六种:
设置盒子外边框,使外盒子居中,左右外边框值相等(长度未知)
水平居中:在div的position为relative(相对定位时有效,绝对定位无效)
水平居中:给div设置一个宽度,然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
更简洁地居中一个img:
display:table-cell;
text-align:center;
vertical-align:middle;
注意:img出现底部留白问题
解决方式:
1.把img设置成display: block 或 vertical-align: bottom;
2.给父元素line-height: 5px;或font-size:0