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
  • #257077

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

    I learn CSS from the link here
    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 ?


    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;


    Thank you.
    For example, from this link

    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)


    Try out some of the methods detailed here


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

    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.