Question

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

我的容器有一个静态宽度，但是有一个灵活的高度。现在我希望我的容器垂直居中，但我不知道如何。

你可以帮助我吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: