Html CSS-中心大div在较小的div内+；隐藏溢出

html:

<div class="container">
    <div class="wide1">test</div>
</div>

<div class="container">
    <div class="wide2">test</div>
</div>

<div class="container">
    <div class="wide3">test</div>
</div> 

---

我希望所有的“测试”都在一条垂直线上（居中）。我需要在不知道内部div宽度的情况下使用它。

居中到什么位置？外部容器divs？您必须覆盖内部div的宽度，例如

max width:100%

例如：

---

以什么为中心？外部容器divs？您必须覆盖内部div的宽度，例如

max width:100%

例如：

---

明白了！但是使用JavaScript

---

也许有一个纯CSS的解决方案（？）

明白了！但是使用JavaScript

---

也许有一个纯CSS的解决方案（？）

得到了同样的问题-用CSS3 translateX解决了

.container div{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

---

得到了相同的问题-使用CSS3 translateX解决

.container div{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

---

但这会改变内部div的宽度，如果内部还有其他内容呢？图像-或者仅仅是几段文字？我不清楚你到底想发生什么-以图像为例，你希望最终结果是什么样的？另外，如果再次显式设置图像的宽度，请不要忘记

max width

它们：但这会更改内部div的宽度，如果内部有其他内容呢？图像-或者仅仅是几段文字？我不清楚你到底想发生什么-以图像为例，你希望最终结果是什么样的？另外，如果您再次明确设置图像的宽度，请不要忘记

max width

它们：干杯，这里是最佳答案。与相对的父母和绝对的孩子一起工作，最好的答案在这里。也适用于相对父级和绝对子级

jQuery(function($){
    $(".container > *").each(function(){
       var m = ($(this).parent().innerWidth() - $(this).outerWidth())/2;
       $(this).css("margin-left", m);
    });
});

.container div{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}