CSS:<br>水平、垂直置中

CSS水平、垂直置中

<div class="divOut">
	<div class="divIn"></div>
</div>

方法一:

利用position:absolute,margin:auto

設定絕對定位的子元素,其父元素的 position 必須要指定為 relative !
且絕對定位元素會互相覆蓋,若內容元素較多,可能就會有些問題

.divOut{
	background:#C7FBF3;
	width:90%; 	height:80%;
	position:absolute;					/*必須為絶對定位*/
	top:0; left:0; right:0; bottom:0;
	margin:auto;						/*方框外距離平均分配*/
}
.divIn{
	background:#F8AAAB;
	width:60%;	height:60%;
	position:absolute;					
	top:0; left:0; right:0; bottom:0;
	margin:auto;						
}

方法二:

利用position:absolute,width,height為%單位

*{padding:0; margin:0;}
.divOut{
	background:#B6C0EF;
	position:absolute;
	width:80%;	left:10%;	 /* 因單位相同,(100-80)/2 */
	height:80%;	top:10%;				
}

方法三:

利用position:absolute,width,height為px單位

.divOut{
	background:#B6C0EF;
	position:absolute;
	width:600px; left:50%; margin-left:-300px;	/*width的50%*/
	height:400px; top:50%; margin-top:-200px;			
}

方法四:

利用Flex

*{padding:0; margin:0;}
html,body{
	height:100%; width:100%;		/*在此範例為使Div在頁面垂直置中,height必須設定100%*/
	display:flex;				
	align-items:center;				/*設定垂直置中*/
	justify-content:center;			/*設定水平置中*/
}
.divOut{
	background:#B7F0FF;
	width:90%;	height:90%;
	display:flex; align-items:center; justify-content:center;		
}
.divIn{
	width:80%;	height:60%;
	background:#F8C2FD;
}

參考連結