css常规水平居中&&垂直居中方案

前言

无论水平居中还是垂直居中相信你并不陌生，但有多少种实现方式，每种的优劣以及兼容性相信你并不清楚。

水平居中

行内标签水平居中

• 基本实现设置父标签内容居中对齐，然后子标签为行级内容时就可以实现效果。 .par{text-align:center;}

块级标签水平居中

• 保证块级，保证有宽高，设置位置关系为左右居中；

  .sub{margin:0 auto;}
  .sub{margin-left: auto;margin-right:auto;}
  复制代码

垂直居中

• 单行文本垂直居中，行高等于高度

     .par{
     height:40px;
     line-height:40px}
  复制代码

• 单行文本和图片垂直居中，行高等于高度，并且设置对齐方式为middle，前提图片的高度在行高之内

    .par{ height:40px;line-height:40px;} 
    .par .sub{vertical-align:middle;}
  复制代码

• 容器高度不确定，多行文本垂直居中，内容整体高度不确定，padding-top=padding-bottom,

• 容器高度确定，多行文本垂直居中，内容整体高度不确定

  //方案一 
    .par{display:table;}
    .par .sub{
    display:table-cell;
     vertical-align:middle;}
    //方案二
     .par .sub{
     position:absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%)}
   //方案三，缺一不可,必须保证三行代码
     .par {
     display:flex;
      flex-direction:column;
      justify-content:center;}
  复制代码

• 容器高度确定，内容整体高度确定

  //方案一 
   .par{
   height:200px;
   }
      .par：before{
  height: 50%;
    content: "";
    width: 100%;
    display: block;
   }
   .par .sub{
   height:50px;
  margin-top:-25px；
  }
  //方案二
   .par{
   height:200px;
   }
   .par .sub{
   height:50px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-25px；
  }
   //方案三，缺一不可
   .par {
   display:flex;
   flex-direction:column;
   justify-content:center;}
  复制代码