声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433.
我们都知道margin: 0 auto;可也实现块状元素的水平居中;但是对于绝对顶为的元素就会失效;
请看实例:
绝对定位后margin: 0 auto;居中失效的解决方法
浏览器效果图:
我们可以看出在正常情况下: margin: 0 auto; 实现居中真是棒棒的!
我们把css样式修改为:
浏览器效果:
子元素(蓝色盒子)的居中效果已失效!
绝对定位以后margin: 0 auto;实现居中失效的解决方法:
为了使子元素(蓝色盒子)在绝对定位下实现居中,我们可以利用定位和margin-left取相应的负值,实现居中;
具体代码如下:
浏览器效果图:
是不是达到我们想要的结果了(认真看代码中的注释)。