高度为自动时如何做垂直居中？

Question

我遇到了一些 CSS 的小问题。

我的 Container 的宽度是静态的，但高度是灵活的。现在我想将我的容器垂直居中，但我不知道如何。

你能帮帮我吗？

section article {
        position: absolute;
        width: 350px;
        height: auto;
        right: 10%;
        z-index: 2;
        background-color: #fff;
        padding: 15px;
        opacity: 0.9;
    }

	<section>
            <article>
                <header>
                    <h1>Headline</h1>
                    <h2>Title</h2>
                </header>
                <p>content content content</p>
            </article>
        </section>

Answer 1

您可以将文章垂直居中，首先将其向下移动 50%，然后将其向上移动 50%，使其居中。

section article {
    position: absolute;
    width: 350px;
    height: auto;
    right: 10%;
    z-index: 2;
    background-color: #fff;
    padding: 15px;
    opacity: 0.9;
    top: 50%; // move down 50% of container
    transform: translateY(-50%); // move up 50% of it's own height  
}

Demo