3种方法：如何让一个div在垂直水平方向上居中对齐？

新手在处理网站建设页面的时候，常常会遇到：css让不定宽高的div，垂直水平居中的问题，下面就分享三种方法来实现：

方法一： flex弹性布局（这样操作方式最多，最常用）

.div{ display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; background-color: #fff; } .div2{ background-color: pink; }

方法二：使用transform

.div{ background-color: #fff; width: 400px; height: 400px; } .div2{ position: relative; top: 50%; left: 50%; transform: translate(-50%, –50%); background-color: pink; }

方法三： 绝对定位position

.div{ position: relative; width: 400px; height: 400px; background-color: #fff; } .div2{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: pink; }

看完后不妨自己本地都测试一下奥，看看这三种都有啥区别~