水平居中&&垂直居中

前言

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

水平居中

行内标签水平居中

• 基本实现设置父标签内容居中对齐，然后子标签为行级内容时就可以实现效果。
  .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;}

  //方案 四 根据line-height 对行内块级元素的修饰

        <span>这里是高度为150像素的标签内的多行文字，文字大小为12像素。文字大小为12像        素。<br>第二行文字</span>

  .mutiLinesContainer{ margin-top: 10px; width:500px; height:150px; line-height:150px; overflow:hidden; border:1px solid red; font-size:0; span,div{

  display:inline-block;
  font-size:12px;
  line-height:20px;
  vertical-align:middle;

  } } ```

• 容器高度确定，内容整体高度确定
  //方案一 .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;}

参考案例

• line-height demo