如何使得一个div在页面居中显示

想要实现一个div在页面居中显示,然后无从下手，面向百度了解了一下大佬们的方法，这才一脸醒悟:

方法一：

使div绝对定位，然后left与top各设置50%,再设置margin-top为高度的负一半值，margin-left为宽度的负一半值即可

            div{
                width: 300px;
                height: 400px;
                border: solid 1px black;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -200px 0 0 -150px;
                text-align: center;
             }

方法二：

同样的使div绝对定位,left和top也是各设置50%，然后设置transform属性的translate(-50%,-50%)即可,这里需要注意的是transform存在一个兼容性问题，需要加上浏览器前缀,这点很让人痛苦了。

div{
            width: 300px;
            height: 400px;
            border: solid 1px black;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
        }

方法三:

通过弹性布局或者网格布局实现元素居中显示

.father{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center
}