用 css 將元素置中

Centering Percentage Width/Height Elements

要讓類似 dialog 的彈出 div 在頁面置中的小技巧。

view plaincopy to clipboardprint

1. .center {   
2.   position: absolute;   
3.   left: 50%;   
4.   top: 50%;   
5.      
6.   /*  
7.   Nope =(  
8.   margin-left: -25%;  
9.   margin-top: -25%;  
10.   */  
11.   
12.   /*   
13.   Yep!  
14.   */  
15.   transform: translate(-50%, -50%);   
16.      
17.   width: 40%;   
18.   height: 50%;   
19. }  

反應：