CSS实现DIV垂直居中

“44年前我们就把人类送上月球了，但现在我们仍然无法在CSS中实现垂直居中”
James An derson

使用如下代码结构，并且直接插元素中：

    
Am I centered yet?
    
Center me,please!

一、基于绝对定位的解决方案
我们先来看一个早期的垂直居中方法，它要求元素具有固定的宽度和高度：

 main {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -3em;
            margin-left: -9em;
            width: 18em;
            height: 6em;
       }

借助强大的calc函数，这段代码还可以省略两行声明：

main {
            position: absolute;
            top: calc(50% - 3em);
            left: calc(50% - 9em);
            width: 18em;
            height: 6em;
      }

显然，这个方法的最大的局限在于它要求元素的宽高是固定的。遗憾的是，对于绝大多数CSS属性（包括margin）来说，百分比都是以其父元素的尺寸为基准进行解析的。
在这个例子中，答案来自CSS变形属性。当我们在translate()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，而这正是我们所需要的。

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

二、基于视口单位的解决方法
margin的百分比值都是以父元素的宽度作为解析基准的。以下代码不出效果

 main {
            width: 18em;
            padding: 1em 0.5em;
            margin: 50% auto 0;
            transform: translateY(-50%);
        }

CSS值与单位定义了一套新的单位，称为视口相关的长度单位。
1、vw是与视口宽度相关的。与常人的直觉不符的是，1vw实际上表示视口宽度的1%，而不是100%。
2、与vw类似，1vh表示视口高度的1%。
3、当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。
4、当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。

main {
            width: 18em;
            padding: 1em 1.5em;
            margin: 50vh auto 0;
            transform: translateY(-50%);
        }

三、基于Flexbox的解决方法

body {
            display: flex;
            min-height: 100vh;
            margin: 0;
        }

        main {
            margin: auto;
        }

Flexbox的另外一个好处在于，它哈可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。举个例子，假设我的结构代码是：

Center me，please!

我们先给这个main元素指定一个固定的尺寸，然后借助Flexbox规范所引入的align-items和justify-content属性，我们可以让它内部的文本也实现居中

 main {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18em;
            height: 10em;
        }