如何将div放置在屏幕中间，而是随页面一起移动？在窗口的中心

Question

我的表不会位置，并与文档中移动

的jQuery：

$table.css('width', $(window).width() - $("this").width()/2) 

HTML：

<div class="tabcon"> 
<table> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
    </tr> 
</table>   
</div> 

Answer 1

你应该使用CSS这样的事情。试试这个。

.tabcon{ 
    margin-right: auto; 
    margin-left: auto; 
    max-width:500px; 
} 

Answer 2

如果“屏幕中间”的意思是水平和垂直居中，则需要进行以下设置。绝对位置和顶部/左侧设置首先将左上角的角落放到窗口的正中间，然后transform: translate(-50%, -50%)设置将其向左和向上移动一半表格的宽度和高度，从而放置整个表格进入确切的中间。

注意：vh/vw确保它确实是屏幕的中间，而不是任何父元素。

table { 
 
    border: 1px solid green; 
 
    position: absolute; 
 
    top: 50vh; 
 
    left: 50vw; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="tabcon"> 
 
    <table> 
 
    <tr> 
 
     <td>AA </td> 
 
     <td> BB</td> 
 
     <td> DD</td> 
 
     <td>FF </td> 
 
    </tr> 
 
    </table> 
 
</div>