Html 容器外部的文本中心

有没有可能在不使用javascript，也不知道文本有多大的情况下，将文本置于css的中心，并使其从左到右展开

在我的尝试中，文本总是向右展开

.container{
宽度：90px；
边框：1px纯红；
文本对齐：居中；
空白：nowrap；
溢出：可见；
}

Hello非常长的文本
小文本

您可以做的是下面的解决方案：使容器

位置：相对

，在其中放置一个

span

，并将下面的设置应用于该span以使其居中（位置：绝对等） 不过，你必须给容器增加一些高度才能使其工作

.container{
宽度：90px；
边框：1px纯红；
空白：nowrap；
溢出：可见；
文本对齐：居中；
位置：相对位置；
高度：1.4em；
}
.container>span{
显示：块；
位置：绝对位置；
左：50%；
转换：translateX（-50%）
}

Hello非常非常长的文本
小文本

您可以做的是下面的解决方案：使容器

位置：相对

，在其中放置一个

span

，并将下面的设置应用于该span以使其居中（位置：绝对等） 不过，你必须给容器增加一些高度才能使其工作

.container{
宽度：90px；
边框：1px纯红；
空白：nowrap；
溢出：可见；
文本对齐：居中；
位置：相对位置；
高度：1.4em；
}
.container>span{
显示：块；
位置：绝对位置；
左：50%；
转换：translateX（-50%）
}

Hello非常非常长的文本
小文本

您可以使用Flexbox：

.container{
显示：flex；/*以内联方式显示flex项（子项）*/
对齐内容：居中；/*水平居中*/
宽度：90px；
边框：1px纯红；
/*文本对齐：居中*/
空白：nowrap；
溢出：可见；
}

Hello非常长的文本
小文本

您可以使用Flexbox：

.container{
显示：flex；/*以内联方式显示flex项（子项）*/
对齐内容：居中；/*水平居中*/
宽度：90px；
边框：1px纯红；
/*文本对齐：居中*/
空白：nowrap；
溢出：可见；
}

Hello非常长的文本
小文本

我有点难以理解您试图实现的确切行为，但如果您将文本放在div的中心，它将始终扩展到div宽度允许的范围内的左侧和右侧。我想您需要一个内部元素来实现这一点。如果我的问题不清楚，很抱歉。感谢Johannes和VXp的回答。Flexbox对我来说似乎更好。我有点难以理解您试图实现的确切行为，但如果您将文本放在div的中心，它将始终扩展到div宽度允许的范围内的左侧和右侧。我认为您需要一个内部元素来实现这一点。如果我的问题不清楚，很抱歉。感谢Johannes和VXp的回答。Flexbox对我来说似乎更好。