已知高度宽度元素的水平垂直居中 绝对定位与margin

2018-01-03 11:08:00
admin
原创
280
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>已知高度宽度元素的水平垂直居中 绝对定位与margin</title>
	</head>
	<style>
#container{
	position:relative;
	height:300px;
	background:#d6d6d6;
}

#center{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
}
	</style>
	<body>
	<div id='container'>
		<div id = 'center'>#center #center #center #center</div>
	</div>
		
	</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227