垂直居中实现的几种方式

居中问题有水平居中和垂直居中，这两种居中又分为行内元素居中和块级元素；

水平居中

首先说一下水平居中，相对比较简单；
行内元素：
在它的父布局元素应用text-align:center;

块级元素：
对自身应用margin:auto;
如果是垂直居中就是一件很头疼的事情啦~

垂直居中

看上去似乎很简单，然而并不是那么easy；网页制作过程，经常要用到图片、文字的垂直居中！

行内元素垂直居中

• 利用line-height属性实现

  单行垂直居中，记住是单行(⊙o⊙)哦！适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出。

body{
    background: rgba(255,0,0,0.5);
   }
     #example1 {
    height: 200px;
    line-height: 200px;
    background: #161616;
    color: #fff;

  }
<div id="example1">
     单行文字垂直居中单行文字垂直居中单行文字垂直居中单行文字垂直居中单行文字垂直居中
 </div>

文本内容太长，出现了换行，换行后的内容会溢出！

<div id="example1">
    单行文字垂直居中,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet neque mollitia nesciunt odio at magnam, aspernatur corporis ducimus voluptates tenetur quam facilis ullam nisi voluptatem iure sequi perferendis, maiores adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis quos, nobis odio praesentium explicabo quod, soluta dolorum totam a veniam atque ipsam consequuntur sapiente aperiam maiores cum laborum quisquam? Tenetur.
</div>

• 利用table属性
  借助 table 的属性：将父容器设置成 table，需要竖直居中的元素设置为 table-cell，然后就可以使用 vertical-align 属性来居中

 #example1 {
    height: 200px;
    line-height: 200px;
    background: #161616;
    color: #fff;
    width: 500px;
    display: table;
  }
   #inner{
     display: table-cell;
     vertical-align: middle;
  }
  <div id="example1">
    <div id="inner">
    单行文字垂直居中 
    </div>
</div>

• 利用padding，元素上下添加相同大小的 padding 值，注意盒模型的变化

块级元素垂直居中

块级元素，可以利用绝对定位 和 translate 等，在已知或者未知块级元素高度时，分别使用不同的方法。

1. 块级元素高度固定

1. 块级元素高度已知，利用margin填充

#outer {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
}
#outer .inner{
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}
<div id="outer">
    <div class="inner">块区域垂直居中</div>
</div>

这里的overflow: hidden;也很关键，如果不存在这个属性，会产生一个问题给子元素设置外边距时，效果会作用在父元素上。

你会发现margin-top: calc((100px - 50px)/2);作用在了父元素上

主要原因：外边距溢出造成的

解决办法:
1、为父元素增加边框
2、由父元素的内边距来取代子元素的外边距
3、overflow

2. 绝对定位实现水平、垂直居中

用在内部容器的宽高，外部容器的宽高可以不定

  #test {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
}
#test4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}
<div id="test4">
    <div class="inner">块区域垂直居中</div>
</div>

2. 块级元素高度不固定

1：局上下文垂直居中
(相对/绝对)移动top50%,然后，借助 translateY 使元素向上移动自身高度的一半，进而实现竖直居中。
内外容器都可以是不定的

/* 先将元素的上边界置于竖直的中间*/
position: relative;  
top: 50%;

/* 再使用 translateY，将元素向上移动自身高度的一半*/
transform: translateY(-50%);  

2：利用 Flex布局 居中
这个不是太了解暂时先放在这，后续补上…