CSS 垂直居中

1. line-height
             适用场景：单行文字，下拉框，按钮等

              原理：将单行文字设置行高以后，文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。

示例如下

<style>
     .content{
            400px;
          background: #ccc;
          line-height:100px; /* 垂直居中 */
         text-align: center; /* 水平居中 */
      }
</style>
<div class="content">我居中了</div>

2. line-heigh + inline-block
            既然单行可以做到垂直居中，那么多行肯定也是可以的

            适用场景：多对象的垂直居中

              原理：在要居中的对象外面包裹一层，将它们整个的 display 设置为 inline-block 模仿行内元素。但是包裹对象的内部还是以块级元素的形式存在。

示例如下

<style>
    .main{
          400px;
          border: 1px solid red;
           line-height: 200px;
           text-align: center; /* 水平居中 */
}
   .wrapper{
         line-height: 1;
        display: inline-block;
}
</style>

<div class="main">
    <div class="wrapper">
             <div>我居中了</div>
             <div>我也是</div>// 仅限于是一行，多行就不能垂直居中了
     </div>
</div>

3. absolute + margin 负值（定位方式，固定，已知的宽高）
           这个应该是最常见的居中方式了

      适用场景：多行文字的垂直居中，已知宽高

        原理：利用绝对定位 top 和 left 50%，然后减去元素本身内容区的一半，就可以实现居中

示例如下

<style>
  .main{
        border: solid 1px red;
          400px;
       height: 400px;
       position: relative
}
  .content{
        height: 200px;
          200px;
         background-color: yellow;
         position: absolute;
           top: 50%;
         left: 50%;
         margin-left: -100px;
         margin-top: -100px;
}
</style>
   <div class="main">
            <div class="content">
           </div>
   </div>

4. absolute + margin：auto（很少用）
适用场景：多行文字垂直居中

原理：这种方法跟上面的有些类似，但是这里是通过 margin:auto 和 top,left,right,bottom 都设置为 0 实现居中。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

示例如下

<style>
.main{
   border: solid 1px red;
    400px;
   height: 400px;
  position: relative;
}
  .content{
       position: absolute;
      background-color: yellow;
      200px;
       height: 100px;
        top: 0;
       left: 0;
     right: 0;
      bottom: 0;
    margin: auto;
}
</style>
<div class="main">
        <div class="content"></div>
</div>

这里需要注意设置父元素的 position 必须是 relative 或者 absolute 或者 fixed

5. Flex + align-items（没用过）

适用场景：多对象垂直居中

原理：Flex 布局 align-items 垂直居中，justify-content 水平居中

示例如下

<style>
.main{
     border: solid 1px red;
      400px;
     height: 400px;
     display: flex;
     align-items: center;
     justify-content: center;
}
</style>
<div class="main">
<div>我居中了</div>
<div>我也居中了</div>
</div>

6. display：table-cell（用最多的一个，不需要知道高度）
适用场景：多行文字的垂直居中技巧

原理：利用 display 将 div 设置成表格的单元格，然后利用 veritical-align 实现垂直居中

示例如下

<style>
.main{
border: solid 1px red;
400px;
height: 400px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="main">
<div>我居中了</div>
</div>

原文链接：https://blog.csdn.net/zhang6223284/article/details/82221751