div垂直加水平居中
2018-03-01 本文已影响0人
Homary
一: 绝对定位居中: 外层div相对对位,内层div绝对定位,top、left分别设为50%,再通过设置margin-top、margin-left为高度宽度的负数
{
position: absolute;
top:50%;
left:50%;
margin-top:
margin-left:
}
不足之处: 宽度必须是固定值
二: {
width: 70%;
position: absolute;
top:0; left:0; bottom:0; right:0;
margin: auto
}
这个方法,不仅能在inner宽度不确定时发挥作用,还能兼容各种主流浏览器,看上去似乎很完美,但事实上,当我们的需求改为:宽度随内部文字自适应 ,即宽度未设置时,这种方法就无法满足需求了,原因是left、right设为0后,inner在宽度未设置时将占满父元素的宽度。
运用CSS3:(兼容性问题: ie11- 不兼容)
三: {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
四: flex弹性盒子居中
div中img图片垂直居中(笔试)
方法一: display:table-cell;
text-align: center //水平居中
vertical-align: middle;
方法二: position: absolute; //父元素position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)