将<除>元素定位在屏幕中心

javascript html css

2022-08-30 02:04:12

我想将一个（或一个）元素放置在屏幕的中心，而不管屏幕大小如何。换句话说，“顶部”和“底部”上的左间距应该相等，“右侧”和“左侧”边的左侧空间应该相等。我想只用CSS来完成这个。<div><table>

我尝试了以下方法，但它不起作用：

 <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>

答案 1

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

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

请不要使用内联样式！下面是一个 http://jsfiddle.net/S5bKq/ 的工作示例。

答案 2

随着转换现在越来越普遍地得到支持，您可以在不知道弹出窗口的宽度/高度的情况下执行此操作

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

容易！JS在这里小提琴：http://jsfiddle.net/LgSZV/

更新：查看 https://css-tricks.com/centering-css-complete-guide/，获取有关CSS居中相当详尽的指南。将其添加到此答案中，因为它似乎引起了很多关注。