如何使绝对定位的id为content的div元素垂直水平居中？

你之前用justify-content: center和align-items: center没生效，是因为父元素#field没开启Flex布局。下面给你几种靠谱的实现方式：

方法一：Flex布局（最推荐） #

给父容器开启Flex，直接用你熟悉的属性就能实现居中，代码修改如下：

#field {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex; /* 开启Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
#content {
    width: 100px;
    height: 50px;
    background-color: black;
}

<div id="field">
    <div id="content"></div>
</div>

这种方法代码简洁，不需要子元素额外设置定位，适配性强。

方法二：绝对定位+margin:auto #

如果不想用Flex，也可以给子元素设置绝对定位，配合margin:auto实现居中：

#field {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
#content {
    width: 100px;
    height: 50px;
    background-color: black;
    position: absolute; /* 子元素也要设置绝对定位 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* 自动分配margin实现居中 */
}

注意这种方法要求子元素必须设置固定宽高，否则会被拉伸占满父容器。

方法三：绝对定位+transform（适配未知宽高） #

如果弹窗内容宽高不固定，用这个方法最稳妥：

#field {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
#content {
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 向左向上偏移自身宽高的一半 */
}

即使后续修改#content的宽高，也不需要调整居中代码，兼容性拉满。

内容的提问来源于stack exchange，提问作者catmau5