<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如同文字一样显示居中的方法
<style>
#partent{
text-align:center;
}
#center-div{
display:inline-block;
}
</style>
常见的方法:
#center-div{
margin:0 auto;
}
我开发常用的,让其居中的方法:
<style>
#parent{
position:relative
}
#center-div{
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-20px;
}
</style>
后来发现,这种绝对定位的方式虽好,但是并没有下面的方式好
<style>
#center-div{
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
}
</style>
因为自始至终我无需知道div具体的宽度是多少。