Html div中的文本不在div中间

我正在寻找一些方向或与文字工作的最佳实践。我试图建立一个气泡，在一个小范围内保存一个图像和一个名称。我希望文本居中。你会使用什么策略？在处理文本时，我似乎总是遇到问题

身体{ 背景：黑色； } .椭圆形{ 宽度：150px； 高度：50px； 边框：2倍纯白； 边界半径：500px； 颜色：白色； 利润上限：200px； 显示器：flex； 对齐项目：居中； } .oval>美国国旗{ 背景：url'https://res.cloudinary.com/mikebeers/image/upload/v1552151059/us_zsvoel.png'; 背景尺寸：封面； 背景位置：中心； 身高：100%； 宽度：100%； 溢出：隐藏； 边框左上半径：500px； 边框左下半径：500px； /*边框：2倍纯红*/ 最大高度：50px； } .oval>文本{ 边框：2倍纯红； 字体大小：.9em； 线高：2米； 填充：0； 显示器：flex； 对齐内容：居中对齐； 身高：100%； } 文本>p{ /*边框：1px纯绿色*/ 断字：保留一切； 填充：0； } 美国

---

如果要使文本在框中垂直和水平居中，可以使用flexbox。将这些样式添加到框中

display: flex;
justify-content: center;
align-items: center;

---

如果您想了解更多关于flexbox的信息，这里有一个很好的指南：

您在a或a中使用过吗？我正在使用flexbox。只需对齐项目：居中。它似乎没有移动到中心。默认情况下，p元素具有边距底部。按边距删除：0；此外，在.oval>text@mikebersWorked….中，您应该使用对齐项目，而不是对齐内容。。。。谢谢