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

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

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

margin-left: auto;
margin-right: auto;

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

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

解决方法

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

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

FIDDLE

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;

}
.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

猜你在找的CSS相关文章