css居中的方式（水平居中+垂直居中+水平垂直居中）

一.水平居中盒子

1.行内元素水平居中

实现方法：首先要确定父元素是不是块级元素，如果是，则给父元素添加text-align:center；属性，如果不是，则给先给父元素设置display：block；属性再添加text-align:center;属性。

 <style>
 .out{
      width: 500px;
      height: 500px;
      background-color: blue;
      text-align: center;
    }
    .in{
      background-color: red;
    }
    </style>

  <div class="out">
    <span class="in">行内元素水平居中水平居中水平居中水平居中</span>
  </div>

2.块级元素水平居中

1.使用margin：0 auto

实现方法：需要谁水平居中就给谁添加magin:0 auto;

实现原理：首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度,margin:0 auto的auto是指平分剩余空间,那么在这个测试例子中auto就是指水平方向平分剩余的宽度。

  <style>
    .out{
      width: 500px;
      height: 500px;
      background-color: blue;
    }
    .in{
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 0 auto;
    }
    </style>

  <div class="out">
    <div class="in"></div>
  </div>

2.使用定位属性

实现原理：给父元素设置绝对定位position：relative，给子元素设置相对定位position：absolute，由于子元素相对于父元素定位，先设置子元素left:50%;（子元素的左上角相对父元素向右移动百分之五十），然后再transform：translateX（-50%）；（相对于自身的宽度的x轴向左移动一半）。这样就实现了子元素相对于父元素水平居中对齐了。

  <style>
    .out{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: blue;
    }
    .in{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    </style>

  <div class="out">
    <div class="in"></div>
  </div>

 3.使用flex弹性布局（宽度定不定都可以）

实现方法：给父元素设置为弹性布局容器display：flex；再设置justify-content：center；定义项目在主轴上的对齐方式水平居中即可。

  <style>
    .out{
      display: flex;
      width: 500px;
      height: 500px;
      background-color: blue;
      justify-content: center;
    }
    .in{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    </style>

  <div class="out">
    <div class="in"></div>
  </div>

 二.垂直居中盒子

1.行内元素垂直居中

1）.单行文本情况下：

实现方法：直接设置子元素的行高line-height等于父元素的高就行。

  <style>
    .out{
      width: 500px;
      height: 500px;
      background-color: blue;
    }
    .in{
     background-color: red;
      line-height: 500px;
    }
    </style>

  <div class="out">
    <span class="in">行内元素垂直居中垂直居中垂直居中</span>
  </div>

2）.多行文本情况下

实现方法：给父元素设置display:table-cell;和vertical-align: middle;属即可；

  <style>
    .out{
      width: 500px;
      height: 500px;
      background-color: blue;
      display: table-cell;
      vertical-align: middle;
    }
    .in{
     background-color: red;
    }
    </style>

  <div class="out">
    <span class="in">多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本行内元素垂直居中垂直居中垂直居中</span>
</div>
    

2.块级元素垂直居中

1.使用父绝子相定位

实现方法：跟块级元素水平居中的定位方法一样，父元素绝对定位，子元素相对定位。给子元素设置top:50%;(即向下移动父元素的50%高度），再margin-top：-（自己的宽度的一半）；（即向上移自己的高度的一半）。maigin-top也可换成transform：translateY(-50%).

  <style>
    .out{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: blue;

    }
    .in{
      position: absolute;
      height: 100px;
      width: 100px;
     background-color: red;
     top: 50%;
     margin-top: -50px;
    }
    </style>

  <div class="out">
    <div class="in">垂直居中垂直居中</div>
    </div>

 2.使用flex布局（可以不定宽度）

实现方法：给块状元素的父元素添加属性 display: flex; align-items: center;

  <style>
    .out{
      display: flex;
      align-items: center;
      width: 500px;
      height: 500px;
      background-color: blue;
 
    }
    .in{
      height: 100px;
      width: 100px;
     background-color: red;
    
    }
    </style>

  <div class="out">
    <div class="in">垂直居中垂直居中</div>
    </div>

 三.水平垂直居中

1.用定位方法（已知宽高的情况下）

法一：设置父元素相对定位，子元素绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

  <style>
    .out{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: blue;
 
    }
    .in{
      position: absolute;
      height: 100px;
      width: 100px;
     background-color: red;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;    
    }
    </style>

  <div class="out">
    <div class="in">水平垂直居中</div>
    </div>

 2.父绝子相的水平居中和垂直居中的结合版。设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left;//子元素宽度的一半px; margin-top: //子元素高度的一半px。可以用css3新属性 transform: translateX(-50%) translateY(-50%);代替margin-left和margin-top属性达到相同的效果。

  <style>
    .out{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: blue;
 
    }
    .in{
      position: absolute;
      height: 100px;
      width: 100px;
     background-color: red;
     top: 50%;
     left: 50%;
     margin-top: -50px;
     margin-left: -50px;
    }
    </style>

  <div class="out">
    <div class="in">水平垂直居中</div>
    </div>

 3.flex垂直水平居中

实现方法：给父元素设置display：flex;justify-content:center;//水平居中 ,align-items:center;//垂直居中属性

  <style>
    .out{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 500px;
      background-color: blue;
 
    }
    .in{
      position: absolute;
      height: 100px;
      width: 100px;
     background-color: red;
    }
    </style>


  <div class="out">
    <div class="in">水平垂直居中</div>
    </div>