使用显示内联块和相对位置集中 div答案

【问题标题】：Centralize div with display inline-block and position relative使用显示内联块和相对位置集中 div
【发布时间】：2015-02-28 04:52:56
【问题描述】：

我正在尝试纵向和横向集中，但没有成功：

https://jsfiddle.net/szg7hhph/1/embedded/result/

HTML：

<div id="new__event">
  <div class="target">
    <h2>Free Pass</h2>
  </div>
</div>


body {
  margin: 0;
}

#new__event {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
#new__event {
  pointer-events: all;
  opacity: 1;
}
#new__event .target {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 48px;
  width: 50%;
  margin: 0 auto;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #f98835;
  margin-top: 1.5rem;
}

我已经尝试了margin 0 auto、text-align、vertical-align，但盒子仍然在角落里..

【问题讨论】：

可以给盒子设置一个固定的高度吗？
那么，不幸的是，除非您首先找出最终使用 javascript 的高度，否则您无法真正将其居中。也许你可以让你的对话从顶部偏移 20 或 30 像素而不是真正居中？
@JosephMarikle 可以使用transform。看我的回答。

标签： html css

【解决方案1】：

将#new_event .target的position更改为absolute，删除margin-top属性并添加以下新属性：

box-sizing: border-box;
left: 25%;
top: 50%;
transform: translateY(-50%);

这应该从 IE 9 开始工作。

结果

【讨论】：

非常好的解决方案！我必须自己使用它。由于上边距，它略微偏离，但它似乎完美地工作：jsfiddle.net/kya72gdd 我错误地假设没有固定高度就无法完成。
@JosephMarikle 谢谢 :-) 你是对的，由于margin-top 属性，它略有偏差。我会更新我的答案。
但是如果我想再放一个目标怎么办？他们最后将在第一个
@DRX 在这种情况下，您可能需要添加一个包装器 div（它获取 transform 属性和相关内容）。