Search code examples
csspositioningcenter

how to set DIV position to 200 pixels to left of the center


I want to position a DIV 200 pixels to left of the center.

I am currently using the following code, but on higher resolution displays (e.g. 1920×1080), the DIV was slipping out of position:

.hsonuc {
    position: absolute;  
    top: 20px; 
    margin:auto;
    margin-left:200px;
    display:none;
}

What I want to achieve:

Illustrating a div that is positioned 200px to the left of the center of the page


Solution

  • Simply position it 50% from the right (right:50%;), and then push it over using margin-right:200px; (example).

    HTML

    <div class="hsonuc">DIV</div>
    

    CSS

    .hsonuc {
        position:absolute;
        top:20px;
        right:50%; /* Positions 50% from right (right edge will be at center) */
        margin-right:200px; /* Positions 200px to the left of center */
    }