在使用绝对定位后,我们经常会利用绝对定位和Margin进行水平居中。
假设盒子宽80px,高100px
1绝对定位后的水平居中方法:{
position:absolute;
top:50%;
left:50¥;
margin-top:-50px;
margin-left:-40px;
}
定位方法是使用绝对定位让盒子在父元素中下移父盒子高度的一半,再利用margin方法将盒子上移负的自己宽度一半。注意,由于绝对定位后的盒子脱离文档流,对其使用margin是相对自身进行移动。
假设盒子宽度为width,高度为height,利用绝对定位进行水平和垂直居中的一般形式为:
{
position:absolute;
top:50%:
left:50%:
margin-top:-height;
margin-left:-width;
}
后面讲讲关于margin:0,auto 实现居中的原理以及实现方法。