为什么查看Wraith输出的屏幕截图时我的内容没有居中？

Question

我在使用Wraith时遇到了一个不寻常的问题。 https://github.com/BBC-News/wraith

下面的标记旨在使.heading元素居中。它确实可以在所有Chrome，Firefox和Safari浏览器上居中显示。

我的HTML：

    <section class="design-intro">
        <div class="container">
            <div class="grid center-xs">
                <div class="heading">
                    <div class="content">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                    <h3>Quisque massa nisi, varius ut sapien quis, pellentesque sodales mauris. Nullam ornare,&nbsp;leo</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

我的SCSS：

.design-intro {
    padding: 250px 0;
    background-color: #34353A;

    .heading {
        position: absolute;
        top: 50px;
        z-index: 2;
    }
}

下面是在浏览器中呈现的部分的屏幕截图。使用Wraith对上述html / css进行屏幕截图时，.heading div的位置未对齐。似乎表现得好像设置为right: 0;。即使我将css更改为包括right: auto; left: auto;，它仍然未对齐。

下面是幽灵吐出的屏幕截图。标记是相同的。

这个问题的真正不寻常之处和症结在于；如果.heading元素位于左侧居中并平移，请参见下文：

    .heading {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
        z-index: 2;
    }

屏幕快照全部按预期出来。

有人知道为什么会这样吗？

这不是我无法解决的问题，我想了解为什么会发生，因此我可以向同事解释。

不仅是我在网上看到的关于幽灵的问题：https://codersblock.com/blog/centering-codepen-screenshots/

[不幸的是，没有多少人问这个问题，所以我在Google上找不到的很多，可能不是我在搜索正确的搜索词。

感谢您的帮助，非常感谢谢谢萌

Answer 1

请尝试使用此代码..它将起作用..

css

.heading {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    top: 50%;
    z-index: 2;
    right: 0;
    max-width: 300px;
    margin: 0 auto;
}

Answer 2

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
        }
        .design-intro {
            padding: 250px 0;
            background-color: #34353A;
        }
        .heading {
            position: absolute;
            top: 50px;
            z-index: 2;
            left: 0;
            right: 0;
            text-align: center;
        }
        .heading .content h2, h3 {
            color: #ffffff;
            text-align: center;
        }

    <section class="design-intro">
        <div class="container">
            <div class="grid center-xs">
                <div class="heading">
                    <div class="content">
                        <h2>Lorem ipsum dolor sit amet.</h2>
                        <h3>Quisque massa nisi, varius ut sapien<br> quis, pellentesque sodales mauris.<br> Nullam ornare, leo</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>