Как центрировать выровнять вверх div с помощью Javascript

Ответ 1

Попробуйте следующее:

<div id="popup" class="popup">
  This a vertically and horizontally centered popup.
</div>

<a onclick="showPopup('popup');">Show Popup</a>

<style type="text/css">
  .popup {
    width:200px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:none;
  }
</style>

<script type="text/javascript">
  function showPopup(id) {
    var popup = document.getElementById(id);
    popup.style.display = 'block';
  }
</script>

CSS объяснил: Div - 200x100, вы устанавливаете его на 50% сверху и 50% слева, но чтобы полностью сосредоточить его, вам нужно вычесть из этих 50% значений половину ширины и высоты, способ сделать это для использования отрицательных полей, поэтому margin-top должно быть отрицательным значением высоты /2, а margin-left должно быть отрицательным значением ширины/2.

Ответ 2

Как насчет использования CSS:

<div class="div">Some Content......</div>

.div {
   margin-left: auto;
   margin-right: auto;
}

Ответ 3

попробовать:

 function msgBox(message)
 {
  var msgbox = document.getElementById("msgbox");
  msgbox.innerHTML = message;
  var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
  var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);              
  msgbox.style.top = y;
  msgbox.style.left = x;
  msgbox.style.display = "block";
 }

Ответ 4

Попробуйте фиксированное позиционирование:

#box {
  position: fixed;
  width: 40%;
  margin: 200px 30%;
}

Он только по горизонтали. Вертикальное будет играть с. Я понятия не имею, как браузеры действуют по-разному с вертикальным выравниванием.

Ответ 5

У меня также была проблема с вертикальной центрировкой на любой веб-странице, требующей прокрутки.

Переключение на позицию: исправлено решение, так:

position:fixed;
top:50%;
left:50%;
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */

Это работало в firefox, google chrome, safari (pc) и IE9.

К сожалению, я хотел, чтобы он появился перед pdf file - всплывающее окно появилось перед использованием Firefox, Chrome, но пошло в IE9 и Safari....