在屏幕中心定位<div>元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我想将一个<div>(或一个<table>)元素放置在屏幕的中心,而不考虑屏幕大小。换句话说,“顶”和“底”上的空间应该相等,“右”和“左”侧的空间应该相等。我只想用CSS来完成这个任务。

我试过以下,但它不工作:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

注意: 如果<div>元素(或<table>)在网站上滚动或者不滚动,则无论如何。只是希望它在页面加载时居中。

提问于
用户回答回答于

简单的方法,如果你有一个固定的宽度和高度:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

请不要使用内联样式!这是一个工作示例http://jsfiddle.net/S5bKq/

用户回答回答于

随着转换变得越来越无处不在,你可以在不知道弹出窗口的宽度/高度的情况下做到这一点

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

简单!JSFiddle在这里:http : //jsfiddle.net/LgSZV/

扫码关注云+社区