CSS垂直居中的几种方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011350550/article/details/79375022

对于一个前端开发人员，元素居中在布局中相当常见，水平居中实现非常非常容易，如果是行内元素，设置text-align:center就行，如果是块级元素，通过设置边距margin:auto可实现水平居中。
垂直居中实现起来相对较为较为麻烦，不啰嗦，直接上干货。主要有下面几种方法：
1、绝对定位方法

<div id="main"></div>
 #main{
         position: absolute;;
         background: red;
         width: 200px;
         height: 200px;
         top:50%;
         left:50%;
         margin-top: -100px;
         margin-left: -100px;
       }

margin-top和magin-left是为了消除绝对定位50%带来的偏差，值为块级元素高和宽的一半的负值，不用过多解释，应该都能理解。
借助calc()函数，可以将上面的代码改造如下

#main{
         position: absolute;;
         background: red;
         width: 200px;
         height: 200px;
         top:calc(50% - 100px);
         left:calc(50% - 100px);
       }

2、基于视口单位的方法

#main{
         background: red;
         width: 200px;
         height: 200px;
         margin:50vh auto 0;
         transform: translateY(-50%);
       }

关于vh，transform，translateY不清楚的同学可以去百度一下。

3、基于弹性布局（flex）实现
这是比较推荐的一种方法，弹性布局的出现，的确是福音。

body{
        display: flex;
        min-height: 100vh;
        margin:0;
      }
       #main{
         background: red;
         width: 200px;
         height: 200px;
         margin: auto;
       }

上面就是垂直居中的几种常用方法，欢迎大家批评指正。