Page always stay at the center of screen - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
July 26, 2017 at 8:51 am #257077

aspfun
Participant

Company use 17″ and 23″ monitor. I want app page always stay at the center of screen.

I learn CSS from the link here http://jsfiddle.net/PvfFy/.
I added a div1 and set class as divMain.
It works great.

#divMain {
position: fixed;
/* center the div /
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/ give it dimensions */
min-height: 10em;
width: 90%;
height: 80%;
top: 5em;
}

At the page, there are a few controls also, like labels, buttons and gridview.

How to add another CSS to make new div2 (including all controls label, button and gridview) always stay at center of screen ?

July 26, 2017 at 9:47 am #257079

Beverleyh
Participant

Not sure what you mean. If you add another centred div like the existing one, it will obscure/overlap the first centred div.

Maybe you should provide an image of what you’re trying to achieve.

You might also want to learn/review the basics of layout from scratch before you attempt to move forward with this build since I’m not sure that you really want position:fixed; http://learnlayout.com

July 26, 2017 at 10:53 am #257082

aspfun
Participant

Thank you.
For example, from this link
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Is it possible to make child div (small div with text “This div element has position: absolute”)

<

This div element has position: absolute;

>

always stay at the center of parent div? (I knew how to make parent div at the center of screen)

July 26, 2017 at 1:28 pm #257093

Beverleyh
Participant

Try out some of the methods detailed here https://css-tricks.com/centering-css-complete-guide/

July 27, 2017 at 12:30 am #257110
webinuse
Participant
I am not quite sure that I have understood you well, but following your link, I did what I thought you wanted. Hope this helps. About centering something horizontally in css almost every time you can do it by giving an element some width (and width can’t be 100%, otherwise how could element have margins), than giving it display:block and margin: 0 auto properties. If you need to center it vertically it’s also easy you can use calc(), as I did.
```
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
    display: block;
    margin: 0 auto;
} 

div.absolute {
    position: relative;
   width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
    display: block;
    margin:calc(50% - 175px) auto;

}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

This div element has position: relative;
  This div element has position: absolute;
</div>

</body>
</html>
```
July 27, 2017 at 4:21 am #257119

aspfun
Participant

I ran your code. It is very close as expected.
I’ll do more study.
Thank you very much.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘Design’ is closed to new topics and replies.