1. 程式人生 > >CSS絕對居中樣式(不論視窗尺寸)

CSS絕對居中樣式(不論視窗尺寸)

實現效果:

不管視窗尺寸大小,都可以實現水平和垂直居中

程式碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>居中效果</title>
		<link href="style.css" rel="stylesheet" />
		<style type="text/css">
			.panel{
				width: 0;
				height: 0;
				position: fixed;
				left: 50%;
				right: 50%;
				top: 50%;
				bottom: 50%;
			}
			
			.image{
				width: 500px;
				height: 500px;
				margin-left: -250px;
				margin-top: -250px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="panel">
			<div class="image">
				
			</div>			
		</div>
	</body>
</html>