html - 当一个 100vw 的元素在一个不居中且不全宽的容器内时，如何使它居中？

Question

我在容器中有一个非全宽 (715px) 的全宽元素。这个容器没有居中，因为它旁边有一个侧边栏 (245px)。

我无法绝对定位该元素，因为它是动态的/矩阵中的一个 block 。

无论屏幕尺寸如何，如何确保它始终居中？

边距:自动左边距:50%

不起作用，使用百分比并在视觉上做它不起作用，因为一旦屏幕尺寸改变，全宽元素就不再居中

HTML

<section class="grid">
    <div class="grid__item one-quarter">
        <ul>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
    </div>
        <div class="grid__item three-quarters">
            <div class="page-builder-item">
                <h1>Some content in an element</h1>
            </div>
            <div class="page-builder-item">
                <h1>Some content in an element</h1>
            </div>
            <div class="page-builder-item full-width">
                <h1>Some content in an FULL WIDTH element</h1>
            </div>
    </div>
</section>

CSS

.grid {
    width: 960px;
    display: flex;
    margin: auto;
}

.grid-item {
    display: inline-block;

}

.one-quarter {
    width: 25%;
    border: 1px solid red;
}
.three-quarters {
    width: 75%;
    border: 1px solid blue;
}

.page-builder-item {
    background: pink;
    height: 100px;
    width: 100%;
}

.page-builder-item.full-width {
    width: 100vw;
    background: magenta;
    margin-left: -25%;
}

Codepen 示例链接 https://codepen.io/hellojessicagraham/pen/pxedav

Answer 1

一般来说，我认为最好将子元素保持在其父元素的范围内，因为这会变得非常棘手。但是，如果您需要使用此布局，您可以尝试类似的方法:

margin-left: calc((-1 * 960px * .25) - (50vw - (.5 * 960px)));

我确定可以缩短，但为了清楚起见，我想保留完整的计算。第一部分 -1 * 960px *.25 移动洋红色框使其左边缘与网格的左边缘对齐。第二部分 50vw - (.5 * 960px) 然后进一步移动洋红色框，使其左边缘与浏览器的左边缘对齐。

问题是它有点脆弱。它非常在很大程度上取决于“网格”元素的确切宽度和左列的百分比宽度。

CSS Tricks有一篇关于将比 parent 宽的元素居中的好帖子。它的解决方案并不直接适用于这种情况，但它是更好地理解您的选择的好资源，我用它来开发我使用的 calc 语句