02、相當於一個盒子永遠自適應上下左右居中
阿新 • • 發佈:2019-01-29
上下左右居中顯示
1、margin:上下給個合適的數值 左右auto2、定位 :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>