1. 程式人生 > >面試題:怎麼讓盒子在盒子內居中

面試題:怎麼讓盒子在盒子內居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#demo{
				width: 500px;
				height: 600px;
				background: red;
				position: relative;
			}
			.box{
				width: 200px;
				height: 200px;
				background: black;
				position:absolute;
				left: 0;
			    right: 0;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			}
			
		</style>
	</head>
	<body>
	
		<div id="demo">
			<div class="box"></div>
		</div>
		
	</body>
</html>

子絕父相。給父盒子相對定位,子盒子絕對定位,然後子盒子上下左右都為0,給它一個margin:auto。這樣的話,不管寬高怎麼變化,裡面的盒子始終都是居中的。