CSS各种居中

CSS居中

div与div居中

div水平居中

 1.margin-left: auto;
 2.margin-right: auto;
 3.margin: 0 auto;

内容居中(固定大小)

父级：

position：relative

子div：

    margin-top=-hight;
    postion: absolute
    left:50%;
    top:50%;

内容居中（可拖动居中）

父级：

 position：relative

子div:

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

---

 .container{
    width: 500px;
    height: 500px;
    position: relative;
  }
  .content{
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

文字居中

水平集中:text-align:center;

1. 单行垂直居中
   如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

2. 多行未知高度文字的垂直居中
   如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的
   padding值相同即可。

3. 多行文本固定高度的居中

   div#wrap {   
       height:400px;   
    display:table;   
   }   
   div#content {   
       vertical-align:middle;   
       display:table-cell;   
      border:1px solid #FF0099;   
    background-color:#FFCCFF;   
    width:760px;   
   }  
   

4. 完美的方案

   div#wrap {   
       display:table;   
       border:1px solid #FF0099;   
    background-color:#FFCCFF;   
    width:760px;   
     height:400px;   
    _position:relative;   
      overflow:hidden;   
   }   
   div#subwrap {   
       vertical-align:middle;   
       display:table-cell;   
      _position:absolute;   
      _top:50%;   
   }   
   div#content {   
      _position:relative;   
      _top:-50%;   
   }   
   <div id="wrap">
     <div id="subwrap">
      <div id="content"><pre>现在我们要使这段文字垂直居中显示！</pre>
      </div>
      </div>
      </div>