div居中方法

<div id = "parent">

  <div style="height:40px;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