Html 水平居中放置一个Div，内部文本除外

如何实现以下风格：

********************
*                  *
*     ********     *
*     *Text  *     *
*     ********     *
*                  *
********************

内部框居中，但内部文本不居中。

.container{
文本对齐：居中；
宽度：50%；
身高：25%；
背景色：#00aaff；
填充：20px；
}
.盒子{
文本对齐：左对齐；
宽度：35%；
身高：50%；
背景色：#00aa00；
保证金：0自动；
}

正文

从以下HTML开始：

<div class="outer">
    <div class="inner">Test</div>
</div>

大小和颜色的风格应该是明显的，你可以使他们任何大小和颜色你想要的。其他样式是您用来获得所需定位的样式，我将对此进行解释

display: flex;
align-items: center;

（这在较旧的浏览器上不起作用。如果需要的话，我会让你去研究。）这两个框将内框置于外框的中心，沿Y轴（垂直）

这将使内部长方体在外部长方体中沿X轴居中

line-height: 50px;

---

如果您希望文本在内框中垂直居中，则此值需要与内框的高度值相同。

您能告诉我们您尝试的代码吗？可能是JSFIDLE/plnkr？寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码，最好是在问题中。请参阅@DaniSpringer@DaniSpringer-据我所知，唯一自动生成的注释是该状态的副本，可能是[link]的副本。Paulie使用的文本类似于调试问题的关闭原因，但现有的帮助/关闭原因都没有明确请求堆栈片段，因此这是它们的文本。（不过有一些评论的简短链接：）@DaniSpringer我使用Chrome扩展来进行堆栈溢出自动评论-

margin: auto;

line-height: 50px;