Html 将一个div垂直居中于另一个div内

假设我有一个简单的html页面：

<div class="main">
    <div class="header">
        <h1>HEADER</h1>
    </div>
    <div class="content">
        <div class="box">
        </div>
    </div>
</div>

以下是当前页面的外观：
现在，我尝试将

框

div水平和垂直居中，相对于整个主体-标题大小
我试图做的：

顶部利润率：50%——由于某种原因，箱子一直向下到底部

将

content

div的位置设置为相对，将

box

div的位置设置为绝对-

content

div与固定的

标题重叠

---

您可以将内容类设置为

.content {
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

*{
左边距：0；
边际上限：0；
}
身体，
html{
身高：100%；
宽度：100%；
保证金：0；
}
.标题{
背景色：红色；
文本对齐：居中；
位置：固定；
宽度：100%；
}
.内容{
背景色：仿古白色；
填充顶部：38px；
}
h1{
页边距底部：0；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.内容{
/*弹性：1*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
}
.盒子{
宽度：150px；
高度：150像素；
背景颜色：黄色；
}

标题

这里是解决方案：

.content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

---

这可能是你需要的。记录在代码中

*{
左边距：0；
边际上限：0；
}
身体，
html{
身高：100%；
宽度：100%；
保证金：0；
}
/*修改*/
.标题{
背景色：红色；
文本对齐：居中；
/*位置：固定*/
位置：粘性；
宽度：100%；
}
.内容{
背景色：仿古白色；
填充顶部：38px；
}
h1{
页边距底部：0；
}
/*修改*/
梅因先生{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
对齐项目：居中；
}
/*修改*/
.内容{
/*弹性：1*/
显示器：flex；
对齐项目：居中；
身高：继承；
}
.盒子{
宽度：150px；
高度：150像素；
背景颜色：黄色；
}

标题

一种方法是使用CSS转换

.box{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
/*水平中心*/
保证金：0自动；
}

像那样试试这个

.box{宽度：150px；高度：150px；背景色：黄色；边距：自动；位置：相对；顶部：50%；}

@sergeykuznetsovexactly@Abdallah巴古提，我给了你答案below@sergeykuznetsov这非常有效。但是如果我的.container中有一个文本或div我不想居中，在这种情况下我能做什么呢？

.content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}