html - 我怎样才能把它居中，而不弄乱我的伪元素？

Question

Here's a fiddle (代码在本文底部重复)

该网站是一个垂直滚动条，由许多这样的整页 <section> 组成s，我想将每个面板上的内容居中，同时将标题固定在顶部，将链接固定在底部。

问题是，一旦我将 translateX 应用于 <h1>将它居中，它会弄乱 .rbn 的堆叠:after和 :before伪。

(如果删除前 9 行 CSS，您将看到功能区的外观)

这个问题有“修复”，described here

当我按照这些思路尝试任何事情时，尽管我:

• 如果浏览器宽度导致半像素问题，文本/轮廓会变得非常模糊，并且
• 我失去了丝带的光滑边缘，scale(.999)通常给我。

这是在 Chrome 35 中，我还没有开始在其他浏览器中寻找。

所以我认为以 h1 为中心与 position:absolute;left:50%;transformX(-50%)是一个非首发。即使它可以正常工作，显然目前至少有一个主要浏览器存在错误/问题，所以我更愿意找到替代解决方案。

我还有哪些其他选择？ :

html, body {
    height:100%;
    text-align:center;
    padding:0;
    margin:0
}
section {
    width:100%;
    height:100%;
    display:table;
    background:#def;
    padding:120px 0 80px;
    position:relative
}
h1 {
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%)
}
.content {
    background:#f2f2f2;
    display:table-cell;
    vertical-align:middle;
    padding:0 50px;
}
.downlink {
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%)
}
/* ribbon styles */
 .rbn {
    position:absolute;
    background:#0f1111;
    color:#fff;
    padding:0.1em 1em;
    border:1px solid #888;
    box-shadow:0px 0px 0px 3px #0f1111;
}
.rbn::before, .rbn::after, .rbn>b::before, .rbn>b::after {
    content:'';
    display:block;
    position:absolute;
    bottom:-.35em;
    transform:scale(.999)
}
.rbn::before, .rbn::after {
    border:1em solid #0f1111;
    z-index:-2
}
.rbn::before {
    left:-1em;
    border-width:.9em 1.6em .9em 0.25em;
    border-left-color:rgba(255, 255, 255, 0)
}
.rbn::after {
    right:-1em;
    border-width:.9em 0.25em .9em 1.6em;
    border-right-color:rgba(255, 255, 255, 0)
}
.rbn>b::before, .rbn>b::after {
    border:1px solid;
    z-index:-1;
    border-color:#3d3d3d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
}
.rbn>b::before {
    left:0;
    border-width:.35em 0 0 .85em
}
.rbn>b::after {
    right:0;
    border-width:.35em .85em 0 0
}

Answer 1

我建议将您的部分一分为三。页眉、中间和页脚。

<style>
    html, body {
        height: 100%;
        text-align: center;
        padding: 0;
        margin: 0
    }

    h1, h2, p {
        margin: 0;
    }

    .header, .footer {
        width: 100%;
        height: 10%;
    }

    .content {
        width: 100%;
        height: 80%;
        display: table;
        background: #def;
        padding:0 ;
    }

    .inner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }
</style>

<section>
    <div class="header">
        <h1>This is a heading</h1>
    </div>
    <div class="content">
        <div class="inner">
            <h1><b>This is a heading</b></h1>
            <h2>test</h2>
            <p>A mix of content in here.  h2, p, div, etc.</p>
            <div>
                <p>blah</p>
                <p>blah</p>
                <p>blah</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="downlink"><a href="#nextsection">V</a></p>
    </div>
</section>
<section>
    <div class="header">
        <h1>This is a heading</h1>
    </div>
    <div class="content">
        <div class="inner">
            <h1><b>This is a heading</b></h1>
            <h2>test</h2>
            <p>A mix of content in here.  h2, p, div, etc.</p>
            <div>
                <p>blah</p>
                <p>blah</p>
                <p>blah</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="downlink"><a href="#nextsection">V</a></p>
    </div>
</section>

这样你就完全不需要担心定位问题。它还使文本居中等变得更容易。