1. 程式人生 > >02、相當於一個盒子永遠自適應上下左右居中

02、相當於一個盒子永遠自適應上下左右居中

上下左右居中顯示

    1、margin:上下給個合適的數值 左右auto

    2、定位 :left與top給個合適的值

    *3、position:absolute;left:0px;top:0px;right:0px;bottom:0px;margin:auto;自適應(最常用)

案例:此處以瀏覽器視窗為盒子

<!doctype html><!--聲明當前文件為html文件-->
<html lang="en"><!--語言為英語-->
	<head><!--頭部-->
		<meta charset="UTF-8"><!--字元編碼:utf-8國際編碼  gb2312中文編碼-->
		<meta name="Keywords" content="關鍵詞">
		<meta name="Description" content="描述">
		<title>居中案例</title>
		<style>/*css樣式表的衣櫃*/
		*{margin:0px;padding:0px;}/*去除預設外邊距、內邊距*/
		body{background:#000;}
		div{width:200px;height:200px;position:absolute;left:0px;top:0px;right:0px;bottom:0px;
		margin:auto;
		}
		</style>
	</head>
	<body><!--身體-->
		<div>
			<img width="200" height="200" src="4.jpg"/>
		</div>
	</body>
</html>