如何在网页中居中浏览器屏幕？

Question

我的网页宽度很大

考试：宽度：3000px - 高度：3000px;

在我的页面中，有一个div容器，一些元素为p，img，button。

我希望每次浏览器访问此页面时，浏览器屏幕始终以网页内容为中心。

你可以看到下面的图片：

Answer 1

检查您想要的内容。它将以屏幕的垂直和水平为中心。

$(function () {
    scrollTo((($(document).width() - $(window).width()) / 2),(($(document).height() - $(window).height()) / 2));
});

.main{
    width:1200px;
    height:1200px;
    display:table;
    text-align:center;
}

.sub{
    vertical-align:middle;
    display:table-cell;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
    <div class="sub"><h2>I am center</h2></div>
</div>

检查Fiddle.

希望它有所帮助。

Answer 2

我假设您希望浏览器滚动到中心，如果它对于屏幕太大而不在页面的左上角。

在页面加载后在脚本中使用scrollIntoView()

document.getElementById("#theDivInTheCenter").scrollIntoView()

参考this问题

Answer 3

我没有真正看到目的，但你可以通过使用绝对定位来管理它：

div {
    width: 3000px;
    height: 3000px;
    position: absolute;
    top: 50%;
    margin-top: -1500px; /* 50% of the height */
    left 50%;
    margin-left: -1500px; /* 50% of the width */
    background: lightblue;
}

Answer 4

<强> HTML ：

<div class="container">
    <div class="section">
</div>
</div>

<强> CSS

.container{
    border: 1px solid red;
    width: 600px;
    height: 600px;
}
.section{
    border: 1px solid green;
    width: 300px;
    height: 300px;
    position: relative;
    left:25%;
    top: 25%;
}

您可以尝试以下链接到Fiddle以实现相同目的：

DEMO