css – 居中div比其父级宽,不设置负左边距

前端之家收集整理的这篇文章主要介绍了css – 居中div比其父级宽,不设置负左边距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在div里面有一个div.

内部的div比其父级宽,所以正常程序

  1. margin-left: auto;
  2. margin-right: auto;

生成一个内部div,其中子的左边缘与父级的左边缘对齐.

当人们回答这个问题时,他们会采用负左边距方法.有更清洁的解决方案吗?

@R_404_323@

如何使用position:absolute;左边:0;右边:0;和保证金:自动;

此外,你需要放置位置:相对;在父元素上,其宽度大于外部元素. (在下面的小提琴中,默认情况下相对于身体)

FIDDLE

  1. <div class="outer">
  2. <div class="inner"></div>
  3. </div>

CSS

  1. .outer
  2. {
  3. width: 400px;
  4. height: 400px;
  5. background: beige;
  6. margin: 0 auto;
  7.  
  8. }
  9. .inner
  10. {
  11. width: 600px;
  12. height: 200px;
  13. background: pink;
  14. position: absolute;
  15. left:0;right:0;
  16. margin: auto;
  17. }

猜你在找的CSS相关文章