水平居中

1. 行内元素: 给父元素设置 text-align:center 即可 例如
2. 块元素: 给该元素设置 margin:0 auto即可, 如果有absolute参考第七条
3. 元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin:

   .parent{
    width:fit-content;
    margin:0 auto;
   }
   

4. flex:

   .son{
    display: flex;
    justify-content: center;
   }
   

5. transform属性:

   .son{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
   }
   

6. absolute 绝对定位: 设置父元素相对定位(position:relative)

   .son{
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5宽度;
   }
   

7. absolute 绝对定位: 设置父元素相对定位(position:relative)

   .son{
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
   }
   

垂直居中

1. 单行文本, 则可设 line-height 等于父元素高度
2. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

1. flex:

   .parent{
    display:flex;
    align-items: center;
   }
   

2. transform: 设置父元素相对定位(position:relative)

   .son{
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
   }
   

3. absolute 绝对定位: 设置父元素相对定位(position:relative)

   .son{
    position:absolute;
    top:50%;
    height:固定;
    margin-top:-0.5高度;
   }
   

4. absolute 绝对定位: 设置父元素相对定位(position:relative)

   .son{
    position:absolute;
    height: 固定;
    top: 0;
    bottom: 0;
    margin: auto 0;
   }
   

水平垂直居中

方法1：绝对定位与负边距实现（已知高度宽度）

• 这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。

 #container {
      position: relative;
    }
 #center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
    }

方法2：绝对定位与margin:auto（已知高度宽度）

• 这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

   #container {
      position: relative;
      height:100px;//必须有个高度
    }
   #center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;//注意此处的写法
    }
  

方法3：绝对定位+CSS3(未知元素的高宽)

• 利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。 CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

  #container {
      position: relative;
    }
  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

方法4：flex布局

• 利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。

   #container {//直接在父容器设置即可
      height: 100vh;//必须有高度
      display: flex;
      justify-content: center;
      align-items: center;
    }
  

方法5：flex/grid与margin:auto(最简单写法)

• 容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

  #container {
      height: 100vh;//必须有高度
      display: grid;
    }
  #center {
      margin: auto;
    }