2015-12-22 70 views
0

我想簡單地將div居中置於窗口中間。目前使用的在ie7和ie8中居中一個div

.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; 
 
}
<div class="notSupported">Your browser is not supported</div>

ie7它會導致出現左上角div和在ie8頂部中央。

+0

你的寬度和高度設置爲div來放置 –

回答

-1

塊在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; 
} 
0

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%; 
 
}
<div id="wrapper"> 
 
    <div id="middle"> 
 
    <div id="center">Center me !</div> 
 
    </div> 
 
</div>