Question

如何在页面中间垂直制作不同大小的div。

例如，高度为100px。

喜欢windows 8消息。

谢谢你。穆罕默德。

Answer 1

如果我理解了这个问题，那就是其中一个选项DEMO

<div class="wrap">
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
</div>

.wrap {
  width: 800px;
  margin: 0 auto;
  background: #ccc;
  display:block;
  overflow: hidden;
  padding: 100px 0 0 0;
}
.block {
  width: 100px;
  height: 50px;
  background: green;
  margin: 10px auto;
  display:block;

}
.block:nth-of-type(2) {
  height: 80px;
}
.block:nth-of-type(4) {
  height: 150px;
}
.block:nth-of-type(7) {
  height: 20px;
}

Answer 2

如果您不需要支持破旧的浏览器，这可能是最简单的方法。元素的尺寸并不重要：

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

DEMO

Answer 3

将margin:auto与position: absolute结合使用。然后将所有左/上/右/下声明为零。它只适用于您在CSS中添加height的情况。它不适用于可变高度。

请参阅此小提琴http://jsfiddle.net/mBBJM/1/

在中间垂直制作盒子

3 个答案: