垂直居中实现方案

本文介绍一些垂直居中的方案。

一、利用绝对定位和 transform

设置 left 为50%和 top 为50%，现在已经将元素左上角移到了父元素的中心位置，再通过 translate 调整子元素的中心到父元素的中心，实现垂直居中。此方法可不定宽高。

<template>
  <div class="father">
     <div class="son"></div> 
  </div>    
</template>

<style scoped>
  .father{
    height: 200px;
    border: 1px solid red;
    position: relative;
  }

  .son {
    border: 1px solid blue;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
</style>

实现效果为下图。

抽离出来就是：

 .father{
    position: relative;
  }

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

二、利用 flex 实现

这种最方便、经典的方法了，我日常用的最多的就是前两种了。此方法可不定宽高。利用 justify-content: center; 实现水平居中，利用 align-items: center; 实现垂直居中。

<template>
  <div class="father">
     <div class="son"></div> 
  </div>    
</template>

<style scoped>
  .father{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    height: 200px;
    width: 200px;
  }
  .son {
   border: 1px solid blueviolet;
   width: 50px;
   height: 50px
  }
</style>

实现效果为下图。

抽离出来就是：

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

三、利用 grid 实现

将方法二的 display: flex; 改为 display: grid;也能实现相同效果，兼容性相对于flex要差一些。

四、利用绝对定位和 margin 负值

此方法与方法一不同，此方法需要定宽高，设置 left 为50%和 top 为50%，现在已经将元素左上角移到了父元素的中心位置，再通过 margin-left 和 margin-top 以元素自身一半的宽高进行取负值。

<template>
  <div class="father">
     <div class="son">这是一段文字这是一段文字这是一段文字这是一段文字
     这是一段文字这是一段文字这是一段文字这是一段文字这是
     一段文字这是一段文字这是一段文字这是一段文字</div> 
  </div>    
</template>

<style scoped>
  .father{
    height: 800px;
    position: relative;
    background-color: aqua;
  }
  .son {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    height: 200px;
    margin-top: -100px;
    background-color:  pink;
  }
</style>

实现效果为下图。

五、利用绝对定位 和 margin:auto

此方法子元素上下左右都为0，将margin设置为auto，由于宽高固定，对应方向实现平分，需要有宽高。

<template>
  <div class="father">
     <div class="son"></div> 
  </div>    
</template>

<style scoped>
  .father{
    border: 1px solid red;
    position: relative;
    height: 600px;
    
  }
  .son {
   border: 1px solid blueviolet;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   height: 100px;
   width: 100px;
  }
</style>

实现效果为下图。

六、利用table自带功能

利用 table 元素自带的功能实现垂直居中。

<template>
  <table class="father">
    <tr>
      <td class="son">
        一一串文字一串文字串文字 一一串文字一串文字串文字 一一串文字一串文字串文字 
        一一串文字一串文字串文字 一一串文字一串文字串文字
         一一串文字一串文字串文字 一一串文字一串文字串文字 一一串文字一串文字串文字
          一一串文字一串文字串文字
     </td> 
    </tr> 
  </table>    
</template>

<style scoped>
  .father{
    border: 1px solid red;
    height: 600px;
    
  }
  .son {
   border: 1px solid blueviolet;
  }
</style>

七、利用 div 装成 table 元素

此方法主要是手动添加 display: table;和 display: table-cell; vertical-align: middle;实现与原生table一样的效果。

<template>
  <div class="father table">
  <div class='td'>
   <div class="son">
        一一串文字一串文字串文字 一一串文字一串文字串文字 一一串文字一串文字串文字 
        一一串文字一串文字串文字 一一串文字一串文字串文字
         一一串文字一串文字串文字 一一串文字一串文字串文字 一一串文字一串文字串文字
          一一串文字一串文字串文字
     </div> 
  </div>
  </div>    
</template>

<style scoped>
  .father.table{
    display: table;
    border: 1px solid red;
    height: 600px;
    
  }
  .td {
    display: table-cell; 
    border: 1px solid green;
    vertical-align: middle;
   }
  .son {
    border: 2px solid blueviolet;
  }
</style>

实现效果为下图。

八、利用 table 布局

设置父元素 display: table-cell 子元素设置 display: inline-block 利用 vertical-align: middle和text-align: center 实现垂直水平居中。

<style scoped>
  .father{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid red;
    height: 200px;
    width: 200px;
  }
  .son {
   display: inline-block;
   border: 1px solid blueviolet;
   width: 100px;
   height: 100px
  }
</style>

实现效果为下图。

九利用 vertical-align 和伪元素

<template>
  <div class="father">
     <div class="son">我是内容</div> 
  </div>    
</template>

<style scoped>
  .father{
    border: 1px solid red;
    height: 600px;
    text-align: center;
  }
  .son {
   border: 1px solid blueviolet;
   display: inline-block;
   width: 300px; 
   vertical-align: middle;
  }
  .father:before{
  content:'';
  /*outline: 1px solid green;*/
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.father:after{
  content:'';
  /*outline: 1px solid green;*/
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>

实现效果为下图。

十、利用 flex 和 margin

其实，用了flex布局的话完全可以用方法二。此方法子元素需要是块级元素。

<template>
  <div class="father">
     <div class="son">我是内容我是内容我是内容我是内容我是内
     我是内容我是内容我是内容我是内容
     我是内容v我是内容容我是内容我是内容</div> 
  </div>    
</template>

<style scoped>
  .father{
    border: 1px solid red;
    display: flex;
    width: 600px;
    height: 600px;
  }
  .son {
    border: 1px solid blueviolet;
    margin: auto;
  }
</style>

实现效果为下图。

总结： 实现垂直居中的方法挺多的，但是个人用的最多的是方法一和二，限制较少，实现轻松。