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如同文字一样显示居中的方法

<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具体的宽度是多少。