Question

所以我试图做的是垂直居中文本div并将其扩展到窗口大小，以便对所有大小做出响应。这是我的小提琴：https://jsfiddle.net/2b1wm0pv/

<div class="container">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-6 col-sm-6 col-xs-6">
            <div class="error-number">404</div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">

            <div class="error-small-title">ERROR 404!</div>
            <div class="error-big-title">Oooops, an error has occured!</div>
            <div class="error-description">We are sorry but the page you are looking for is not available anymore or you have entered the wrong address.</div>
            <div class="col-md-5 col-sm-5 col-xs-5">
            <div class="row">
                <div class="error-button">
                    <a href="#" class="error-small-title">RETURN TO HOMEPAGE</a>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

Answer 1

要使文本居中，请在文本div上设置以下CSS，或者包装div：

.selector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

以下是该div的父元素：

.selector {
    position: relative;
}

请注意，绝对定位元素不会长期定义父元素大小，因此强烈建议您为此元素定义宽度和高度。

要将div扩展到它的页面大小，你可以使用视口（视口=浏览器窗口）单位：vw（宽度）和vh（高度），其中100是视口的大小，50将是一半。这与使用％不同，因为％是相对于父级的大小。所以在你的CSS中：

.selector {
    width: 100vw;
    height: 100vh;
}

如何将div垂直扩展到窗口大小并垂直居中？

1 个答案: