Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Page always stay at the center of screen

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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 ?

    #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

    #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)

    #257093
    Beverleyh
    Participant

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

    #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>
    #257119
    aspfun
    Participant

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design’ is closed to new topics and replies.