解决使用绝对定位absolute后，margin：0 auto居中方法失效

我们都知道，当给一个块级元素设置宽度后，使用margin:0 atuo可以实现水平上的居中。

margin:0 auto的理解是，上下边距为0，左右边距为auto（auto是自动调整大小）

在浏览器中div如果没有设置宽度，那么宽度自动为浏览器的宽度，这是给div设置宽度后，div会靠左显示，margin:0 atuo就是为了填充右侧的空白空间。

但是<img>当不设置宽度时，不会块级元素一样宽度默认和浏览器相同，所以不能用margin：0 auto来居中，因为img是行内的块级元素。

可是当使用了绝对定位时，margin：0 auto就失效了，有什么好的方法来失效居中吗？
我们写两个div，关系为父子关系。想要实现div2在div1的下方居中。

<div class="div1"><div class="div2"></div>
</div>

css样式设置为

       .div1{position: relative;height: 300px;width: 300px;background:black;}.div2{position: absolute;bottom:0;height: 100px;width: 100px;background: red;}

此时会发现给div2设置margin:0 auto; div2并不会居中显示。
解决办法是改css为

       .div1{position: relative;height: 300px;width: 300px;background:black;}.div2{position: absolute;bottom: 0;left: 50%;margin-left: -50px;height: 100px;width: 100px;background: red;}

实际上就是给div2一个left为50%，然后使margin-left的值为div2的一半就可以实现居中了

           left: 50%;margin-left: -50px;

解决使用绝对定位absolute后，margin：0 auto居中方法失效相关推荐

工作374-前端margin:0 auto为什么会失效
1.要给居中的元素一个宽度,否者无效. 2.该元素一定不能浮动,否者无效. 3 在HTML中使用标签,需考虑好整体构架,否者全部元素都会居中的. 4.display:table-cell displa ...
css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
[css] 怎么IE6下在使用margin:0 auto；无法使其居中？
[css] 怎么IE6下在使用margin:0 auto;无法使其居中? 浏览器解析的问题,IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效. 个 ...
块状元素的居中，首先设置宽度，再设 margin: 0 auto
块状元素的居中,首先设置宽度 width="10px",再设 margin: 0 auto; . 转载于:https://www.cnblogs.com/npk19195globa ...
margin: 0 auto；的作用
在html中,为什么我们设置一个margin: 0 auto;就可以使得块元素居中? <!DOCTYPE html> <html lang="en"> &l ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
margin:0 auto是什么意思
margin是外边距的意, 当一个元素样式属性里有dumargin:0 auto时,并且父元素的宽度是确定的, 意思是这个元素处于其父元素的居中位置,并且这个元素的上下外边距为0 即:上下外边距为0, ...
text-align:center 和margin:0 auto的区别
基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支持值 ...

解决使用绝对定位absolute后，margin：0 auto居中方法失效

解决使用绝对定位absolute后，margin：0 auto居中方法失效相关推荐

最新文章

热门文章