Javascript：画面の中央の要素が固定の位置で動作しない

ボタンがクリックされたときに画面の中央に要素を垂直に配置する必要があります。ブラウザの高さがどのように調整されていても、真ん中。Javascript：画面の中央の要素が固定の位置で動作しない

<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <button id="button">click me</button> 
    <div id="element">balah</div> 
    </html> 


<style> 
#element{ 
    position: fixed; 
    color: red; 
} 
</style>

私が試した：

<script> 
$("#button").click(function(){ 
    $('#element').css('margin-top',$(window).innerHeight()/2); 

}) 
</script>

出典

2016-08-07 badbye

私はhttps://jsfiddle.net/b14a8bou/ –

JSを使用する必要はありません、これは純粋なCSSで行うことができます。

.fixed { 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

出典

2016-08-07 21:30:41 powerbuoy

あなたはあまりにも要素を考慮し、画面上の位置をカルクする必要が

...

function FixDivCtrl() { 
 
    var btn = $('#test'); 
 
    var target = $('#element'); 
 
    
 
    btn.click(function() { 
 
    var coords = { 
 
     "margin-top": target.height()/-2, 
 
     "margin-left": target.width()/-2, 
 
     "position": "fixed", 
 
     "left": "50%", 
 
     "top" : "50%" 
 
    }; 
 
    target.css(coords); 
 
    }); 
 
} 
 

 
jQuery(document).ready(FixDivCtrl);

div { 
 
    background-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="test">Make it Fixed</button> 
 

 
<div id="element"></div>

出典

2016-08-07 19:31:53 Hitmands

をCUSSクラスを作成します。 Top、l、r、bを0pxに設定し、margin：autoとpositionを固定します。

テストされていませんが、addClassとremoveClassを使用して新しいcussクラスを追加できます。

例： $（あなたの要素）.addClass（ "center"）;

div.center { 
    background-color: red; 
    width: 50px; 
    height: 50px; 
    Top:0px; 
    left:0px; 
    right:0px; 
    Bottom:0px; 
    Position:fixed; 
    Margin:auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<button id="test">Make it Fixed</button> 

<div id="element"></div>

出典

2016-08-07 21:23:45

は次のように表示されるものとその作業https://jsfiddle.net/javigodoy/b14a8bou/3/ –

Javascript：画面の中央の要素が固定の位置で動作しない

答えて

関連する問題