如何让一个div水平垂直居中

在工作中 经常会碰到让一个div框针对某个模块水平垂直居中 针对这种情况 有多种方法 现在一一实现一下

一. div绝对定位水平垂直居中 margin 负间距

代码:

.box {
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

效果如下:

二. div绝对定位水平垂直居中 transforms变形

代码:

.box {
    width: 200px;
    height: 200px;
    background: greenyellow;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

效果如下:

三. 弹性盒模型 css不定宽高水平垂直居中

代码:

.par{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 768px; // 去掉父元素高度时只能水平居中
}
.par .child{
    background: blueviolet;
    width: 200px;
    height: 200px;
}

效果如下：

四. table-cell 是不支持设置 width: 100%; 想让 .parent 和 其容器宽度一致最好设置一个 dispaly: table; 父容器

代码:

div.parent-box {
    display: table;
    width: 100%;
}

div.parent {
    display: table-cell;
    height: 200px;
    width: 200px;
    background-color: orange;
    text-align: center;
    vertical-align: middle;
}

div.child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

效果如下:

五. 绝对定位 calc()函数动态计算实现水平垂直居中

代码:

.par {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid saddlebrown;
}

.child {
    position: absolute;
    width: 200px;
    height: 200px;
    left: -webkit-calc((500px - 200px)/2);
    top: -webkit-calc((500px - 200px)/2);
    left: -moz-calc((500px - 200px)/2);
    top: -moz-calc((500px - 200px)/2);
    left: calc((500px - 200px)/2);
    top: calc((500px - 200px)/2);
    background: gold;
}

需要注意父子元素
效果如下:

六. div绝对定位水平垂直居中 margin auto 实现绝对定位元素的居中

代码:

.box {
    width: 200px;
    height: 200px;
    background: lightcoral;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

效果如下: