Question

我有一个模态，它包含一系列从数组中获取的列表项，如下所示：

$.each(newsArr, function(i) {
  $('#allNewsDiv').append('<div class="all-news-item"><img src="https://dl.dropbox.com/s/r8nu1zb2gpzd92k/Ball%20Icon.png" alt="" style="float:left; margin-right:10px; position: relative; top: 2px;" width="20" height="20"><div class="all-news-item-text">' + newsArr[i] + '</div></div>');
});

最初隐藏的模态可能会随阵列中的项目数量而变化。我希望它垂直居中，但是如果元素的高度可以变化，我该怎么做呢？

到目前为止，我尝试使用.outerHeight(true)测量div的高度，并通过jQuery的#allNewsDiv函数设置.css的高度。没运气！每个.all-news-item的高度似乎被忽略，返回的高度只是边距的总和。以下CSS用于模态：

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #515151;
  opacity: 0.5;
  z-index: 99;
}

#allNewsDiv {
  width: 500px; 
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -275px;
  /*margin-top: ? */
  padding: 25px;
  background-color: #fff;
  border-radius: 8px;
  color: #000;
  /*text-align: center;*/
  box-shadow: 0 0 10px 5px #000;
  z-index: 100;
  display: none;
}

.all-news-item {
  font-family: 'Play';
  color: #000;
  margin: 10px;
}

我也尝试过使用transform: translate (50vw,50vh)和transform-origin: 50% 50%，但是，再一次，没有运气！

这是一个小提琴（一些风格已经改变，但它们大致相同）：

https://jsfiddle.net/shaneswebdevelopment/1d6snzoq/

垂直居中弹出模式，高度设置为自动

0 个答案: