div水平垂直居中

绪论

主要记录几种div水平垂直居中的几种方式。

正文

.dev1 {
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dev2 {
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
}

.dev3 {
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

（若有什么错误，请留言指正，3Q）