垂直居中

你若精彩，蝴蝶自來發表於2018-09-06

1、div的水平居中：

margin:0 auto

 

有高度和寬度的垂直居中：

如果想水平加垂直居中的DIV已知高度和寬度，是最好辦的了！ 
1、先讓這個DIV絕對定位； 
2、讓他距離上邊50%，左邊50%；這會這個DIV的左上角這個點就是視窗的正中間； 
3、因為已經知道了這個DIV的高和寬了，那麼再從這裡點向左移動總寬的一半就可以了， 向上呢也同理；

下面的只是適合absolute的，relative是不適合的。



/*垂直居中，所以一共有三種水平垂直居中的方法


*/
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;


 






或者通過計算高度和寬度：




top: 50%;
left: 50%;
margin: 一半,一半;




 


不知道高度和寬度的水平垂直居中


position: absolute;
				top: 50%;
				left: 50%;
				transform: translate("-50%","-50%");




相關文章