一个div里面的div的居中方法六

### 使用Flexbox实现内嵌DIV水平垂直居中

对于现代浏览器支持良好的情况下，可以采用`flexbox`布局来轻松实现内部`div`的水平和垂直居中。这种方式不仅简洁明了，而且兼容性较好。

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    min-height: 100vh;       /* 至少占据整个视窗高度 */
}
.child {
    width: 200px;
    height: 200px;
    background-color: blue;
}

上述代码通过设置父级容器`.parent`为`display: flex`并配合`justify-content: center`以及`align-items: center`属性实现了子元素`.child`在其内部的完美居中效果[^4]。

### 表格单元格法

另一种较为传统的做法是借助表格显示模式下的单元格特性来进行居中处理：

.parent {
    display: table;
    width: 100%;
    height: 100vh;
}

.between {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: green;
}

此方案利用了HTML表格结构的特点，在`.between`类下定义了一个具有中间对齐特性的表元，并且通过其父节点作为虚拟表格完成整体布局调整[^2]。

### 绝对定位加负边距修正法

当已知目标元素的具体尺寸时，还可以考虑使用绝对定位结合负边距的方式来达成目的：

.parent {
    position: relative;
    width: 100vw;
    height: 100vh;
}

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

这里的关键在于先将`.child`放置于屏幕中心位置(`top: 50%`, `left: 50%`)，再通过`transform: translate(-50%, -50%)`将其向相反方向移动自身大小的一半距离，从而达到精确居中的视觉效果[^5]。