Question

我使用CSS3的视口高度来制作全屏部分（高度：100vh）。不幸的是，我在一个部分内水平和垂直居中的元素时遇到了麻烦。我试图让第一部分中的图像和文本位作为一组显示在屏幕的中央。谢谢你的帮助！

HTML：

<section class="red-bg">
    <div class="middle">
        <img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
        <h1>Some text here.</h1>
    </div>
</section>

<section class="blue-bg">
    <p>Another section here.</p>
</section>

CSS：

body {
    color: #fff;
}

section {
    width: 100%;
    height: 100vh;
}

.middle {
    /* needs to be vertically and horizontally aligned */
}

.red-bg {
    background-color: #f00;
}

.blue-bg {
    background-color: #00f;
}

Answer 1

尝试flexbox

body {
    color: #fff;
}

section {
    width: 100%;
    height: 100vh;
    display : flex;
}

.middle {
    /* needs to be vertically and horizontally aligned */
  margin : auto;
}

.red-bg {
    background-color: #f00;
}

.blue-bg {
    background-color: #00f;
}

<section class="red-bg">
    <div class="middle">
        <img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
        <h1>Some text here.</h1>
    </div>
</section>

<section class="blue-bg">
    <p>Another section here.</p>
</section>

Answer 2

试试这个。 http://jsfiddle.net/stybfgju/1/

.middle {
    /* vertical centering */
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    /* horizontal centering */
    margin: 0 auto;
    display: table;
}

如果您将display更改为block，那么您需要明确设置width
如果需要，添加text-align: center。

水平和垂直中心在100％CSS3的视口高度内

2 个答案: