css - DIV 位置を中央の左 200 ピクセルに設定する方法

Question

DIV中央の左に 200 ピクセルを配置したいと考えています。

現在、次のコードを使用していますが、より高い解像度のディスプレイ (1920×1080 など) では、DIV位置がずれていました。

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

私が達成したいこと:

Answer 1

単純50%に右から配置し ( right:50%;)、次にmargin-right:200px;(例) を使用して押し込みます。

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 */
}

Answer 2

% と px の組み合わせを使用できます。div の幅が 300px の場合、div の半分以上は 150px です。150 + 200 = 350px; 次に、これを使用します

margin-left:calc(50% - 350px);

Answer 3

また、Javascript を使用して、ブラウザの左側から 200 ピクセルが実際に中央から何ピクセルであるかを判断することもできます。そうすれば、使用する必要はありませんposition: absolute。

例 (jQuery):

var centerMark = Math.round( $(window).width() / 2 ); //define the center of the screen
var elementWidth = $('.hsonuc').width();
var position = centerMark - 200 - elementWidth; //define where 200 left of the center is and subtract the width of the element.

//now you have `position` you can use it almost any way you like.
//I prefer to use margins, but that's all up to you.

$('.hsonuc').css('margin-left', position);