将一个 div 居中在一个 div 中，并带有前导和尾随 div答案

【问题标题】：Centre a div within a div with leading and trailing divs将一个 div 居中在一个 div 中，并带有前导和尾随 div
【发布时间】：2015-07-09 18:34:48
【问题描述】：

我想在蓝色容器 div 中居中中间的黄色 div，而不管左侧和右侧的文本/div 的大小。中心 div 的大小应自动调整以适应文本，因为它将动态更新。

然后，左侧黄色 div 应使用右对齐文本填充左侧剩余的空白，此 div 左侧的任何额外文本都应隐藏在左侧蓝色容器的边缘之外。

【问题讨论】：

标签： html css

【解决方案1】：

您可能应该检查一下弹性盒。这是一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这样的事情应该可以解决问题：

.container{
    padding:5px;
    background:blue;
    display: flex;
    justify-content: center
}

查看实际操作： https://jsfiddle.net/kzj983h2/3/

【讨论】：

那太好了，有没有一种方法可以做到不用固定左右div的宽度，让中心div可以动态调整大小以适应文字，然后左边和正确的 div 调整大小以适应剩余的差距？我更新了问题，因为原始问题不够清楚。
我为你更新了 Fiddle。您只需将flex:1 设置为每个应该拉伸的元素。
对于其他尝试这样做的人，最终的解决方案包括在左侧添加方向反转以使右对齐和溢出正常工作。我创建了一个新的小提琴来展示这一点：jsfiddle.net/3c8uvhm3

【解决方案2】：

尝试查看flexboxes。我用你所说的做了一个简单的例子。它应该可以满足您的需求..

$('#button').click(function(){
  $('.two').text($('.two').text() + ', and more words');
});

#content {
  display:flex;
  background:black;
  width:500px;
  padding:3px;
  justify-content:space-between;
  flex-shrink:0;
  overflow:hidden;
}

.one, .two, .three {
  background:white;
  padding:3px;
}

.one, .three {
  width:10%;
}

.two {
  width:80%;
  margin: 0 3px;
}


#main {
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div id="content">
  <div class="one">Block one</div>
  <div class="two">Another word</div>
  <div class="three">Block three</div>
</div>
<br>
<button id="button">Click me!</button>
</div>

【讨论】：