使html中div垂直居中

发表于 | 分类于 |
| 字数统计 247

　　其实这个问题以前做大项目的时候也遇到过，不过当初查了写了之后就忘了po上博客了。这次做作业又碰到了，又重新查了一遍，干脆就写进博客以免忘记。

　　写css的都知道css中有一个vertical : middle的属性可以垂直居中，但是这条属性只对存在valign属性的标签有用，div什么的写了都是白写的。在网上找到了一个非常棒的解决方案，在这里引用一下，核心思想是在外围包一个标签后模拟成table再用垂直居中。并且兼容性不错。

html代码

1
2
3
4
5
6
7
<div id="wrap">
  <div id="subwrap">
    <div id="content">
      content
    </div>
  </div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div#wrap {
  display: table;
  width: 1000px;
  height: 1000px;
  _position: relative;
  overflow: hidden;
}
div#subwrap {
  vertical-align: middle;
  display: table-cell;
  _position: absolute;
  _top: 50%;
}
div#content {
  _position: relative;
  _top: -50%;
}

　　这段代码网上来源太多了……我也不知道应该引用地址写哪里，就空着吧……