如何让一个元素水平垂直居中

如何让一个元素既能水平居中，又能垂直居中，在我们工作中是会经常碰到的，如实现下图的效果：

2020-08-21_093049.png

一下有两种办法可以实现，而且比较简单：

方法1 ：定位：

<style>
    div{
            width:400px;
            height:400px;
            background:red;
            position: relative;
            margin:100px 0 0 100px;
        }
        p{
            width:200px;
            height:200px;
            background:cornflowerblue;
            position: absolute;
            top:100px;
            left:100px;
        }
 </style>
<body>
     <div>
         <p> </p>
     </div>
</body>

方法二、使用css3位移的方式：

<style>
       div{
            width:400px;
            height:400px;
            background:red;
        }
        p{
            width:200px;
            height:200px;
            background:cornflowerblue;
            transform: translate(100px,100px);
        }
        
</style>
<body>
     <div>
         <p></p>
     </div>
</body>

网上还有很多的方法，如有问题，欢迎指出！！！！！