div在屏幕中水平垂直都居中显示的方法

做个登陆注册的页面，想让登陆框位于屏幕的中间，上下左右都居中，效果如下图。

做这个效果的主要难点就在于显示器的大小不一致，你可以很容易的让div水平居中，但是垂直的高度是无限的，你可以通过计算自己屏幕的高度还做到居中，但是换了一个显示器就错位了，以前做这样的效果很麻烦，可能还要用到js，现在用最新的技术几行代码就搞定了，思路如下。

1、我们需要一个大的div（简称div1），把需要居中的小div（简称div2）放进去。这个div1的大小要跟屏幕一样大小。这样div1的高度就不是无限的了。然后让div2基于div1居中。

2、代码如下：

div1 {
    height: 100vh;    //设置高度为百分百屏幕高度
    display: flex;    //启用flex布局
    justify-content: center;   //内部元素水平居中
    align-items: center;    //内部元素垂直居中
}

这样效果就实现了，多么简单！