垂直居中页面，如果大于屏幕，则滚动

Question

我正在尝试创建一个包含未知高度内容的简单HTML页面。我想实现以下行为：

1）内容高度＆lt;屏幕高度：使页面垂直居中

2）内容高度＆gt;屏幕高度：在顶部和底部显示带有滚动条和边距的页面

示例：的

如何使用CSS执行此操作？ （或JS）

Answer 1

首先，让我们用div将内容包装在id="content"内。这将有一个overflow: hidden，以便正确计算高度。

<div id="content">
  <!-- Content -->
</div>

#content {overflow: hidden; margin-top: 20px;}

让我们首先以#content为中心。

.center #content {position: absolute; top: 50%; left: 25%; width: 50%;}

您需要使用jQuery或JavaScript来设置其他人。现在，我正在使用jQuery。

$(function () {
  if ($(window).height() > $("#content").height()) {
    // Content is lesser height than window.
    $("body").addClass("center");
    $("#content").css("margin-top", -$("#content").height()/2).css("overflow", "visible");
  }
});

查看以下两个片段：

$(function () {
  if ($(window).height() > $("#content").height()) {
    // Content is lesser height than window.
    $("body").addClass("center");
    $("#content").css("margin-top", -$("#content").height()/2);
  }
});

#content {overflow: hidden; margin-top: 20px;}
.center #content {position: absolute; top: 50%; left: 25%; width: 50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet maxime praesentium minus facilis placeat temporibus quas. Minus fuga quia vel rerum, sit, nulla est magni unde maxime accusantium numquam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolore amet voluptates consequatur enim quas natus et, nostrum quae, aliquam fugit tempora fuga ipsam at animi pariatur atque. Deleniti, expedita.</p>
</div>

长篇内容：

$(function () {
  if ($(window).height() > $("#content").height()) {
    // Content is lesser height than window.
    $("body").addClass("center");
    $("#content").css("margin-top", -$("#content").height()/2).css("overflow", "visible");
  }
});

#content {overflow: hidden; margin-top: 20px;}
.center #content {position: absolute; top: 50%; left: 25%; width: 50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet maxime praesentium minus facilis placeat temporibus quas. Minus fuga quia vel rerum, sit, nulla est magni unde maxime accusantium numquam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolore amet voluptates consequatur enim quas natus et, nostrum quae, aliquam fugit tempora fuga ipsam at animi pariatur atque. Deleniti, expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet maxime praesentium minus facilis placeat temporibus quas. Minus fuga quia vel rerum, sit, nulla est magni unde maxime accusantium numquam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolore amet voluptates consequatur enim quas natus et, nostrum quae, aliquam fugit tempora fuga ipsam at animi pariatur atque. Deleniti, expedita.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet maxime praesentium minus facilis placeat temporibus quas. Minus fuga quia vel rerum, sit, nulla est magni unde maxime accusantium numquam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolore amet voluptates consequatur enim quas natus et, nostrum quae, aliquam fugit tempora fuga ipsam at animi pariatur atque. Deleniti, expedita.</p>
</div>

Answer 2

您可以使用魔术flexbox +一些jQuery代码。

1. 当窗口高度高于内容大小时，flexbox可以处理所有内容。

2. 如果窗口高度小于内容大小，请将容器设置为正常display:block;。

＆＃13;
＆＃13;
$(document).ready(myfunction);
$(window).on('resize', myfunction);

function myfunction() {
    var wh = $(window).height();
    var ch = $('.content').height();
    if (wh > ch) {
        $('.container').css('display', 'flex');
    } else {
        $('.container').css('display', 'block');
    }
}
＆＃13;
body {
    margin: 0;
}
.container {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}
.content {
    border: 1px solid red;
    margin: 20px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

<强> jsfiddle