Question

我想简单地将一个div放在窗口中间。目前正在使用

＆＃13;

.notSupported {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 500px;
  max-height: 200px;
  margin: auto;
  background-color: #f3f3f3;
  z-index: 1000;
  text-align: center;
}

＆＃13;

<div class="notSupported">Your browser is not supported</div>

＆＃13;

在ie7中，它会导致div出现在左上角和ie8中心顶部。

Answer 1

＆＃13;

html, body { height: 100%; }

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
}

#middle { 
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

/* for IE7 and below */
#middle {
  *position: absolute;
  *top: 50%;
  *width: 100%;
  *text-align: center;
  }

#center {
  *position: relative;
  *top: -50%;
}

＆＃13;

<div id="wrapper">
  <div id="middle">
    <div id="center">Center me !</div>
  </div>
</div>

＆＃13;

Answer 2

Block在IE7中不起作用。

你必须使用zoom：1并将其作为黑客攻击或不使用来自不同css的黑客攻击仅用于ie7。

.notSupported {
    display: block;
    *display: block;
    *zoom:1;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 500px;
    max-height: 200px;
    margin: auto;
    background-color: #f3f3f3;
    z-index: 1000;
    text-align: center;
    width:200px;
    height:50px;
}

在ie7和ie8中居中一个div

2 个答案: