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

I have a web page width large size

我的网页宽度很大

examble : width:3000px - height: 3000px;

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

in my page, have a div container and some elements as p, img, button.

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

I want each time access this page by any browsers, browser screen always center on content of webpage.

我希望每次都能通过任何浏览器访问此页面，浏览器屏幕始终以网页内容为中心。

you can see picture below:

你可以看到下面的图片：

4 个解决方案

#1

Check Following what you want. It will center vertical and horizontal of the screen.

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

$(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>

Check Fiddle.

检查小提琴。

Hope it helps.

希望能帮助到你。

#2

I don't really see the purpose, but you can manage that by using absolute positioning:

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

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;
}

#3

I assume you want the browser to scroll to the center if its too large for the screen and not be at the top-left of the page.

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

use scrollIntoView() in your script after page load

页面加载后在脚本中使用scrollIntoView（）

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

refer this question

提到这个问题

#4

HTML:

HTML：

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

CSS

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%;
}

You can try below link to Fiddle to achieve the same:

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

DEMO

DEMO