CSS实现DIV垂直水平居中

CSS实现DIV垂直水平居中

在页面设计中，很多地方都需要div的垂直水平居中，在前端开篇的学习中，也是使用较多的地方，所以我整理了三种方法帮助大家去解决问题，代码可直接使用，仅供参考学习。

---

方法

方法一：

    <style>
        div {
     
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%