3

I have a web page width large size

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

in my page, have a div container and some elements as 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:

enter image description here

Nguyễn Huy
  • 227
  • 9
  • 19
  • 1
    What do you mean by _browser screen_ ? – Zee May 08 '15 at 06:52
  • 1
    Do you want to center your content to your screen? If so: just do `margin: 0 auto` – Radonirina Maminiaina May 08 '15 at 06:52
  • You mean Content of the page will center the Browser Screen...? if it is Browser screen will always center to the content. what is the Purpose? please explain – Karthi Keyan May 08 '15 at 07:18
  • No, i want browser always scroll to center of content when page load. And Ketan's answer exactly what i want. because i want to make a page like a wall, on the page have some pictures everywhere, users can use mouse to scroll and see these pictures. So i need browser always scroll to center at begin – Nguyễn Huy May 08 '15 at 07:21

4 Answers4

2

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.

ketan
  • 19,129
  • 42
  • 60
  • 98
1

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

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

refer this question

Community
  • 1
  • 1
ShahiM
  • 3,179
  • 1
  • 33
  • 58
1

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;
}
GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
  • my purpose if, i want to display a page like a wall, on the wall have some picture and users can scrolling page by mouse to see pictures. I will try your code and reply you later, anyway, thanks for your help – Nguyễn Huy May 08 '15 at 07:05
0

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

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

DEMO

Ferrmolina
  • 2,737
  • 2
  • 30
  • 46
Vishal
  • 404
  • 3
  • 9