天天看點
傳回

css實作div水準、垂直居中

示例1 chrome33、ie8測試通過：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	/* 固定寬高div，在浏覽器中保持水準、垂直居中 */
	#div1 { 
		width:400px; height:300px; 
		position:absolute; 
		left:50%; top:50%; 
		margin-left:-200px; margin-top:-150px; 
		background:#f90;
	}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

示例2 chrome33、ie8測試通過：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	/* 固定寬高div在固定寬高div中保持水準、垂直居中 */
	#div1 {
		width: 400px;height: 200px;
		background-color: #f00;
		position: relative;
		/* 為div賦予單元格屬性，使其可以應用align屬性 */
		display: table-cell;
		vertical-align: middle;
	}
	#div2 {
		width: 200px;height: 100px;
		background-color: #0f0;
		/* 使目前标簽在父标簽中水準居中，即0 auto 0 auto */
		margin: 0 auto;
		display: block;
	}
</style>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>
</html>

示例3 chrome33、ie8測試通過：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	#div1 {
		width: 400px;height: 200px;
		background-color: #f00;
		/* 使目前标簽在父标簽位置固定 */
		position: absolute;
		top: 50%;left: 50%;
		margin: -100px 0 0 -200px;
	}
	#div2 {
		width: 200px;height: 100px;
		background-color: #0f0;
		display: block;
		/* 使目前标簽在父标簽中保持水準、垂直居中 */
		top: 50%;left: 50%;
		margin: 50px 0 0 100px;
	}
</style>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>
</html>

示例4 chrome33測試通過，ie8測試不通過，參考http://www.w3school.com.cn/tiy/t.asp?f=css3_box-pack：

<!DOCTYPE html>
<html>
<head>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	/* 使用box-pack樣式實作div中子元素居中 */
	#div1 {
		width:350px;
		height:200px;
		border:1px solid black;
		  
		/* Firefox */
		display:-moz-box;
		-moz-box-pack:center;
		-moz-box-align:center;

		/* Safari, Chrome, and Opera */
		display:-webkit-box;
		-webkit-box-pack:center;
		-webkit-box-align:center;

		/* W3C */
		display:box;
		box-pack:center;
		box-align:center;
	}
	#div2 {
		width:100px;
		height:50px;
		background-color: #ff0;
		border:1px solid black;
	}
	
</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
</div>
</body>
</html>

注：對頁面中所有元素應用box-sizing:border-box樣式是為了将padding、margin值都計入width、height中，即為元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制(http://www.w3school.com.cn/cssref/pr_box-sizing.asp)。在上述代碼中應用該樣式無意義，但是在企業級應用中應用該樣式可以減少很多界面缺陷，如标簽未對齊。

前端 垂直居中 水準居中 css div
上一篇: 網頁制作如何搞定css水準垂直居中
下一篇: css 樣式 水準且垂直居中

繼續閱讀