如何將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>