Question

我想知道CSS中的一种方法，将div放在一个没有依赖设置边距的顶部和底部，用魔术数控制高度。

已经学会了所有这些缺点的表单，一些更好，更糟，但都依赖于某些东西，并希望永久解决任何浏览器（至少IE8 +）。

我希望水平和垂直地集中一个没有神奇数字的div元素。其中div的高度动态增长并自动计算和集中。

澄清，是我不想要的一个例子。对于使用widht和高度定义没有灵活性，并且必须使用js操纵添加到每个项目的高度。

<div id="container"></div>

#container { position: absolute; width: 380px; height: 360px; left: 50%; top:50%;      padding: 30px; margin-left: -220px; margin-top: -210px; background: #000; }

Answer 1

喜欢这个吗？

Codepen示例：http://cdpn.io/BuDLo

<强> HTML

<div class='modal-overlay'>
  <div class='modal-box'></div>
</div>

<强> CSS

.modal-overlay {
  background: black;
  bottom: 0;
  height: auto;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

.modal-box {
  background: white;
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
}

如何集中div crossbrowser

1 个答案: