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

admin2019-12-13587

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

image.png

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

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

2、代码如下:

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

这样效果就实现了,多么简单!

网友评论