Css 它没有正确地垂直居中

我想在div“box”中将段落居中，但竖线没有正确居中

.container{
位置：相对位置；
}
p{
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
文本对齐：居中；
}
.盒子{
宽度：100%；
高度：120px；
背景色：#62a6c9；
}

居中

添加

转换：translateY（-50%）；保证金：0到
p
使其垂直居中


.container{
位置：相对位置；
}
p{
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
文本对齐：居中；
转化：translateY（-50%）；
保证金：0；
}
.盒子{
宽度：100%；
高度：120px；
背景色：#62a6c9；
}

居中

< /代码> 你应该改变你的方法，元素<代码> .box <代码>用作下拉边距是完全不必要的，段落<代码> p>代码>，这是我们想要保持在<代码>中的元素。容器< /代码>应该在其边距和<代码>重置。容器< /代码>应该有一个固定的高度。

最后，使用flex Box：


.container{
高度：200px；
背景：橙色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.货柜{
保证金：0；
背景：青色；
}
.集装箱img{
宽度：100px；
高度：自动；
}
.包装纸{
左侧填充：20px；
}

你好，世界

你好，世界

请注意，您的
p
当前不在
.box
内。
您可以创建一个假的
表格
，将
显示：表格
添加到父级，并为子级添加
显示：表格单元格


.container{
位置：相对位置；
}
p{
显示：表格单元格；
保证金：0；
垂直对齐：中间对齐；
}
.盒子{
背景色：#62a6c9；
显示：表格；
高度：120px；
文本对齐：居中；
宽度：100%；
}

居中

排名前50%不“中心”元素，它只对齐中间的顶部边缘。并且
p
元素具有来自浏览器样式表的默认边距，这也会影响此处的元素位置。可能重复欢迎使用StackOverflow。请务必寻找现有的解决方案。这个问题以前已经被问过无数次了。祝你好运非常感谢你。还有一个问题，如果你有html格式的图像，我怎么能把文本放在图像的中心呢？类似这样的：center
是的，你可以问你想要什么！