这是基本的html，.left和.right div，我无法控制它们的宽度，它们的大小可以比现在更大或更小，但是无论它们的宽度如何，我都需要始终将center div保持在.inner容器的中心。
由于左侧仅200px宽，右侧为400px宽，因此.center容器不在中心。
.header{
background-color: blue;
height: 60px;
width: 100%;
}
.inner{
width: 1200px;
margin: 0 auto;
height: 60px;
background-color: pink;
}
.left{
width: 200px;
min-width: 0px;
max-width: 500px;
height: 60px;
background-color: red;
display: inline-block;
opacity: 0.2;
}
.center{
width: 100px;
height: 60px;
background-color: blue;
display: inline-block;
margin: 0 auto;
opacity: 1;
}
.right{
width: 400px;
min-width: 0px;
max-width: 500px;
height: 60px;
background-color: red;
float: right;
opacity: 0.2;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="header">
<div class="inner">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
我已上传the jsbin here
最欢迎使用任何指针或解决方案
答案 0 :(得分：0)
问题的约束：目标是将.center放在容器中。请注意，这100％确保涵盖所有内容，但至少应该有一个良好的开端。请注意每个设置中CSS中的所有注释。显示上下文时更详细，并添加边框和颜色来说明。
.inner类的包含元素为中心.inner的宽度.left和.right元素具有各种内容1200px宽度，以便左右手分别取1200像素中的1100像素或550像素的最大值。 .left,.right设置：flex-grow: 0;/* set to 1 to make them take/fill max-width */比较两个摘要，这是唯一的更改
.header {
background-color: blue;
height: 60px;
border: solid 1px blue;
display: flex;
flex-basis: 1200px;/* how much */
flex-direction: row; /* across */
}
.inner {
display: flex;
flex-direction: row; /* across */
flex-wrap: nowrap;
flex-grow: 5;/* relative number */
flex-shrink: 5;/* relative number */
/* flex-basis: 1200px;/* how much, sets width if un-comment */
/*min-width: 1200px;*//* override basis */
/* max-width: 1200px;*/ /* override basis */
/*width:100%;*/
background-color: pink;
border: solid lime 4px;
}
.left,
.center,
.right {
display: flex;
/*flex:1;*/ /*display: inline-block;*/
flex-direction: column;
border: 2px solid;
}
.left,
.right {
flex: 0 1 0px; /* shorthand for next 3 */
flex-grow: 0;/* set to 1 to make them take/fill max-width */
flex-shrink: 1;
flex-basis: 100px;/* effective min width */
min-width: 0px; /* limits applied overrides basis if greater */
max-width: 550px; /* limits applied overrides basis */
}
.left {
background-color: lime;
border-color: magenta;
}
.center {
display: flex;
flex: 0 0 100px; /* shorthand for next 3 */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
min-width: 100px; /* limits applied overrides basis */
max-width: 100px; /* limits applied overrides basis */
justify-content: left;
flex-direction: row;
/* width: 200px; ignored due to flex-basis but messes with border and .inner containment if set */
background-color: lightblue;
border-color: blue;
}
.right {
background-color: orange;
border-color: cyan;
}
.showcenter {
text-align: center;
/* min-width: 1200px; /* override width min */
max-width: 1200px; /* set max */
width: 100%;/* overridden by min/max */
border: dashed 2px blue;
}
.centerthing {
border-right: 1px dotted;
border-left: 1px dotted;
width: 100px;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="header">
<div class="inner">
<div class="left">lefty</div>
<div class="center">middle</div>
<div class="right">righty</div>
</div>
</div>
<div class="showcenter"><span class="centerthing">centered 100px element just to provide a measure</span></div>
</body>
</html>
.header {
background-color: blue;
height: 60px;
border: solid 1px blue;
display: flex;
flex-basis: 1200px;/* how much */
flex-direction: row; /* across */
}
.inner {
display: flex;
flex-direction: row; /* across */
flex-wrap: nowrap;
flex-grow: 5;/* relative number */
flex-shrink: 5;/* relative number */
/* flex-basis: 1200px;/* how much, sets width if un-comment */
/*min-width: 1200px;*//* override basis */
/* max-width: 1200px;*/ /* override basis */
/*width:100%;*/
background-color: pink;
border: solid lime 4px;
}
.left,
.center,
.right {
display: flex;
/*flex:1;*/ /*display: inline-block;*/
flex-direction: column;
border: 2px solid;
}
.left,
.right {
flex: 0 1 0px; /* shorthand for next 3 */
flex-grow: 1;/* set to 1 to make them take/fill max-width */
flex-shrink: 1;
flex-basis: 100px;/* effective min width */
min-width: 0px; /* limits applied overrides basis if greater */
max-width: 550px; /* limits applied overrides basis */
}
.left {
background-color: lime;
border-color: magenta;
}
.center {
display: flex;
flex: 0 0 100px; /* shorthand for next 3 */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
min-width: 100px; /* limits applied overrides basis */
max-width: 100px; /* limits applied overrides basis */
justify-content: left;
flex-direction: row;
/* width: 200px; ignored due to flex-basis but messes with border and .inner containment if set */
background-color: lightblue;
border-color: blue;
}
.right {
background-color: orange;
border-color: cyan;
}
.showcenter {
text-align: center;
/* min-width: 1200px; /* override width min */
max-width: 1200px; /* set max */
width: 100%;/* overridden by min/max */
border: dashed 2px blue;
}
.centerthing {
border-right: 1px dotted;
border-left: 1px dotted;
width: 100px;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="header">
<div class="inner">
<div class="left">lefty</div>
<div class="center">middle</div>
<div class="right">righty</div>
</div>
</div>
<div class="showcenter"><span class="centerthing">centered 100px element just to provide a measure</span></div>
</body>
</html>