分類  >  Web前端 >

固定闊高的DIV絕對居中示例

tags:    時間:2013-12-10 00:29:13
固定寬高的DIV絕對居中示例

看了一些代碼,然後自己試驗了一番,分享如下示例:

實現點: 如果元素的寬高固定,那麼,css指定樣式為top:50%;left:50%; 而margin-top和 margin-left 指定為負數,絕對值為自身寬高的一半

當然,position也需要指定為absolute,或者relative. 

如果要在某個父級元素內居中,那麼父元素也需要指定CSS的position屬性。

如果有邊框,那麼,margin元素需要做一點微調。

代碼如下:

<!DOCTYPE html> <html>  <head>   <title> 固定寬高的元素居中示例 </title>   <style> 	.content{ 		width: 400px; 		height: 300px; 		position: absolute; 		left: 50%; 		top: 50%; 		margin-left: -200px; 		margin-top: -150px; 		background-color: #8888CC; 	}   </style>  </head>   <body>   <div class="content"> 	<p>指定頁面居中的元素</p>   </div>  </body> </html>

推薦閱讀文章

Bookmark the permalink ,來源:互聯網