div居中方法
<div id = "parent"> <div style="height:40px;width:40px;border:1px solid red" id="center-div">陈小鹏笔记</div> <div>
1、如果是知道具体宽度,使用margin-left:600px或者padding-left:600px这种方法可以用,但会随着分辨率大小或者是响应式屏幕里会出现严重的问题,不适宜这样写。
2、将div如同文字一样显示居中的方法
1 <style> 2 #partent{ 3 text-align:center; 4 } 5 #center-div{ 6 display:inline-block; 7 } 8 </style>
常见的方法:
1 #center-div{ 2 margin:0 auto; 3 }
我开发常用的,让其居中的方法:
1 <style> 2 #parent{ 3 position:relative 4 } 5 #center-div{ 6 position:absolute; 7 left:50%; 8 top:50%; 9 margin-left:-20px; 10 margin-top:-20px; 11 } 12 </style>
后来发现,这种绝对定位的方式虽好,但是并没有下面的方式好
1 <style> 2 #center-div{ 3 position:absolute; 4 left:50%; 5 top:50%; 6 -webkit-transform: translate(-50%,-50%); 7 transform: translate(-50%,-50%); 8 } 9 </style>
因为自始至终我无需知道div具体的宽度是多少 by Demo117